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.
我正在尝试在我制作的响应性网站上使用一些CSS3转换，在桌面Chrome和Android上一切都运行得很好，但是在ios设备上Chrome和Safari都不能正常工作。
The CSS snippet I'm using for my menu, for instance, is below:
例如，我在菜单中使用的CSS代码片段如下:
#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.
我有一个菜单按钮，当点击时，它会调用一个javascript函数，将'left'样式更改为0，并将其从屏幕左侧转移到位置。
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.
在桌面和Chrome Android上一切都很好，但在ios和Safari上，它要么非常不稳定，要么就会延迟一秒钟，然后立即弹出。它在我所有的转换中都是这样做的但是为了简单起见，我展示了菜单一。
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.
以迫使硬件加速的方式，但它也不起作用。我看不出有什么变化。如有任何帮助，我们将不胜感激。
1 个解决方案
#1
4
Avoid using absolute positioning transitions it takes lot of resources, instead try using transform: translateX(0) for horizontal adjustment
避免使用绝对定位转换，这需要大量的资源，而是尝试使用transform: translateX(0)进行水平调整
#1
4
Avoid using absolute positioning transitions it takes lot of resources, instead try using transform: translateX(0) for horizontal adjustment
避免使用绝对定位转换，这需要大量的资源，而是尝试使用transform: translateX(0)进行水平调整