ios - iOS 上的 CSS3 转换速度慢/不工作

Question

我正在尝试在我正在制作的响应式网站上开始使用一些 CSS3 转换，一切都在桌面 Chrome 和 Android 上的 Chrome 上完美运行，但它在 iOS 设备上的 Chrome 和 Safari 上无法正常运行。

例如，我在菜单中使用的 CSS 片段如下:

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

我有一个菜单按钮，单击该按钮会调用一个 javascript 函数，该函数将“左”样式更改为 0，使其从屏幕左侧的外部过渡到位置。

在台式机和 Chrome Android 上一切正常，但在 iOS Chrome 和 Safari 上它要么非常不稳定，要么只是延迟一秒钟然后立即弹出。它在我所有的过渡中都这样做，但为了简单起见，我只显示菜单一。

我已经通过 Stack 进行了大量的谷歌搜索和搜索，但我真正发现的唯一内容是添加以下内容:

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

强制硬件加速的风格，但它也不起作用。我看不出任何变化。任何帮助将不胜感激。

Answer 1

避免使用占用大量资源的绝对定位转换，而是尝试使用 transform: translateX(0) 进行水平调整