Jetteh22 Jetteh22 - 1 month ago 15
iOS Question

CSS3 Transitions On ios Slow/Not Working

I am trying to start using some CSS3 transitions on responsive site I'm making and everything is working perfectly on desktop Chrome, and Chrome on Android but it's not working properly on ios devices for both Chrome and Safari.

The CSS snippet I'm using for my menu, for instance, is below:

#menu {
width: 180px;
height: 100%;
position: fixed;
top: 0;
left: -180px;
z-index: 9;
transition: left 1s;
-webkit-transition: left 1s;
}


I have a menu button that, when clicked, calls a javascript function that changes the 'left' style to 0 which has it transition into position from outside of the left side of the screen.

Everything works fine on desktop and Chrome Android but on ios Chrome and Safari it is either very choppy or it just delays a second and then pops up instantly. It's doing this on all of my transitions but I'm showing the menu one for simplicity.

I have done a LOT of googling and searching through Stack but the only things I've really found say to add the following:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);


to the style to force hardware acceleration but it's not working either. I see no change at all. Any help would be appreciated.

Answer

Avoid using absolute positioning transitions it takes lot of resources, instead try using transform: translateX(0) for horizontal adjustment