iOS does not support webkit-transform functionality

I've been working on incorporating a navigation drawer into my Sencha Touch app by following this article. The animation mentioned in the article utilizes webkit-transform, which functions perfectly on Chrome and Android devices, but seems to be causing issues on iPad mini, even when using Chrome. Below is the CSS snippet I'm using:

.slide{
-webkit-animation-duration: .200s;
-webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}    
@-webkit-keyframes slideout {

from {
-webkit-transform: translate3d(0,0,0);
}

to {
-webkit-transform: translate3d(250px,0,0);
};
}

@-webkit-keyframes slidein {
from {
-webkit-transform: translate3d(250px,0,0);
}

to {
-webkit-transform: translate3d(0px,0,0);
};
}

.slide.out {
-webkit-animation-name: slideout;
-webkit-transform: translate3d(250px,0,0);
}

.slide.in {
-webkit-animation-name: slidein;
-webkit-transform: translate3d(0px,0,0);
}

Could this issue be specific to iOS or am I overlooking something in my implementation?

javascriptioscsssencha-touch-2css-animations

Answer №1

By only using "from" and "to" in your keyframes without specifying intermediary steps, the use of keyframes may not provide much added value. Keyframes tend to result in a cluttered CSS file with unnecessary lines. I believe keyframes are most beneficial when defining substeps.

For simpler animations, transitions might be a more suitable option as they smoothly animate from a starting point to an end value: Check out this Fiddle

div {
    background:red;
    -webkit-transform:translate3d(0,0,0);
    -webkit-transition:-webkit-transform 1s;
}

.slide.in {
    -webkit-transform:translate3d(0,0,0);
}

.slide.out {
    -webkit-transform:translate3d(250px,0,0);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to managing Ajax in functional components in React without using classes

Currently, I am striving to develop all my components as pure functions. However, I have encountered an issue. The component I am working on resembles the structure below. The problem arises when the result of an ajax request triggers a rerender, leading ...

javascriptajaxreactjspurely-functional

What causes the findByIDAndUpdate method to return a `null` value in Mongoose 6?

I am working with nodejs v18, Express v4, and Mongoose v6. I am attempting to update a document, but when using the line below, it returns null. const doc = await User.findByIdAndUpdate(userId, newUser, { new: true }) // doc is null The object newUser con ...

javascriptnode.jsmongodbexpressmongoose

Global axios configuration containing an undefined bearer token

After creating a Vue app using Axios that was installed via Vue UI dependency installation, I encountered an issue with the post headers returning an undefined token Bearer undefined. To resolve this, I made changes to my main.js file. Initially, I had add ...

javascriptvue.jsaxios

Displaying and Concealing Messages with VueJS

Currently, I have set up a basic CLI structure environment and created a component that displays messages/alerts such as "Login Failed." Since this component is intended to be reused throughout the entire app, I decided to import it into the root App.vue f ...

javascriptvue.jssettimeout

The JavaScript Ajax data is in array format, however, the length of the array

I received the following Json data: (Extracted from the console) jsonData Object {0: Object, 1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 7: Object} When I enter jsonData[0] in the console, this is the output: Object {id: 125, Module_id: 2, a ...

javascriptjqueryajax

Ways to specify a template URL while utilizing a component

I have implemented a knockout component, but I would like to use a template URL instead of an inline template. Below is the code snippet for the component: ko.components.register('cat-data', { viewModel: { createViewModel: function(p ...

javascriptknockout.js

Expanding all cards in a Bootstrap collapse when one is clicked

Hello, I am currently working on integrating bootstrap collapse into a section of my django application. Here is the code snippet that I have implemented so far: {% extends 'base.html' %} {% block content %} <div class="container"> & ...

htmlcssdjangobootstrap-4jinja2

Reactjs encountering issues with function of Cookies section

Currently, I am working on a login module in Reactjs using Nextjs. Upon successful login, I am storing the user email in a cookie. The functionality is working as expected, but I want to restrict access to the login page for users who are already logged in ...

javascriptreactjsnext.js

Changing the visibility of a UILabel in a customized UITableViewCell with a button tap

I've created a custom table view cell featuring a button and a hidden label. The value of the label is retrieved from an NSMutableArray. My goal is to reveal the label in the same cell upon clicking the button. Thank you in advance for any help! - (U ...

iosobjective-cuitableview

Combine timepicker with Cordova's local notifications

Currently, I have successfully installed and implemented the cordova local notifications plugin. However, I am now facing the challenge of creating a timepicker for users to select the desired time for setting notifications (e.g., reminders). Is there a so ...

androidiosangularjscordovaionic-framework

Determining WebElement Clickability in Java and Selenium: Beyond the Basics of isDisplayed, isEnabled, and findElement

There is a common method to test if a WebElement is clickable: It typically involves something like this: public static boolean isElementClickable(WebDriver driver, String accessor){ return driver.findElements(By.xpath(accessor)).size() > 0 & ...

javahtmlcssseleniumexception

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

Exploring the world of Xamarin iOS localization

I've attempted numerous times to translate my Storyboard on Xamarin without success. Initially, I have a SplashScreen that calls my MainStoryboard (located inside AppDelegate). public override bool FinishedLaunching(UIApplication application, NSDicti ...

iosxamarinlocalization

Blank YouTube Popup Modal

I am in the process of creating a pop-up modal that contains an embedded YouTube video, but my modal is not displaying properly. I am utilizing Bootstrap and have two separate sections along with JavaScript code. When the modal appears, it remains empty. I ...

javascripthtmlbootstrap-4

I'm encountering a major issue trying to properly position a background image to fill the entire screen

I am struggling to set a background image that fits the entire screen. It looks great on Windows, but when I view the same page on my mobile device (specifically Android using Google Chrome), the image zooms in and out oddly. Additionally, there seems to b ...

htmlcssbackground

Placing a notification on duplicated JavaScript code

In the past, I've had the displeasure of seeing my sites completely ripped off (front end), with some individuals even going so far as to copy every piece of content, including the GA tracking code :) I'm considering inserting a hidden notice wi ...

javascript

What would be the most effective method to send an array through ajax?

My Java script array looks like this: let myArray = new Array(); myArray[0] = 'foo'; myArray[1] = 'bar'; I'm looking for the most efficient way to send this data to the server using AJAX (jQuery). Do I need to serialize it before ...

javascriptjqueryajaxarrayspost

Error: ExpressJs cannot locate the requested CSS file

Currently, I am delving into the world of expressJS and nodeJS in an effort to expand my skills. However, I've hit a bump in the road when the server fails to locate the CSS file (resulting in a 404 error) upon loading the HTML page. Surprisingly, the ...

cssnode.jsexpressnpm

An application using AJAX that supports multiple languages

I am currently developing a web application that heavily relies on JavaScript and AJAX. One of the requirements for this app is to support multiple languages. For server-side translation, I have implemented a template engine in PHP which handles translati ...

phpjavascriptajaxmultilingualtemplate-engine

What is the best approach for storing data locally using coredata, and then syncing it with the API when network connectivity is available?

Is there a way to store data offline using CoreData, and then sync that data with an API once the network connection is restored? Below is the code snippet for saving the data locally: func savePersonalInfo(customerId: String, productId: String, createdB ...

iosswiftapiofflinereachability