I am trying to start using some CSS3 transitions on a responsive site that I am doing and everything works fine on desktop Chrome and Chrome on Android, but it does not work properly on ios devices for Chrome and Safari.
Below is the CSS snippet that I use for my menu:
#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 pressed, calls a javascript function that changes the "left" style to 0, which puts it in a position outside the left side of the screen.
Everything works fine on the desktop computer and on Chrome Android, but on ios Chrome and Safari it is either very intermittent, or it just delays for a second and then pops up instantly. He does this on all my transitions, but I show the menu one for simplicity.
Stack, , , :
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
, . . .