CSS3过渡在ios慢/不工作 [英] CSS3 Transitions On ios Slow/Not Working

问题描述

我想在响应网站上开始使用某些CSS3过渡，我正在制作，一切都在桌面Chrome和Android Android上正常工作，但在Chrome和Safari的ios设备上无法正常工作。

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.

例如，我用于菜单的CSS代码段如下：

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;
}

我有一个菜单按钮，当点击时，调用一个javascript函数， 左样式为0，它从屏幕左侧的外侧过渡到位置。

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.

在桌面和Chrome Android上都可以正常工作，但在ios Chrome和Safari上，它是非常破碎，或者只是延迟一秒钟，然后立即弹出。它在我的所有转换都这样做，但我显示菜单一个简单。

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.

我已经做了很多谷歌搜索和搜索通过Stack，但我真正发现的唯一的东西说添加以下：

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.

推荐答案

避免使用绝对定位转换，它需要大量的资源，而是尝试使用 transform：translateX（0）用于水平调整

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

这篇关于CSS3过渡在ios慢/不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！