我正在尝试在我正在制作的自适应网站上使用一些CSS3过渡，并且所有内容都在桌面Chrome和Android上的Chrome上完美运行，但它在Chrome和Safari的ios设备上无法正常运行。
我用于菜单的CSS片段如下：
#menu {
width: 180px;
height: 100%;
position: fixed;
top: 0;
left: -180px;
z-index: 9;
transition: left 1s;
-webkit-transition: left 1s;
}
我有一个菜单按钮，当点击它时，调用一个javascript函数，将'left'样式更改为0，使其从屏幕左侧外部转换到位置。
在台式机和Chrome Android上一切正常，但在ios Chrome和Safari上，它要么非常不稳定，要么只是延迟一秒钟，然后立即弹出。它在我的所有过渡中都这样做但我为了简单起见而显示菜单。
我已经完成了很多谷歌搜索和搜索Stack，但我真正找到的唯一的事情是添加以下内容：
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
强制硬件加速的风格，但它也不起作用。我看不出任何变化。任何帮助将不胜感激。
答案 0 :(得分：4)
避免使用绝对定位过渡需要大量资源，而是尝试使用transform: translateX(0)进行水平调整