CSS3 转换 ios Slow/Not 工作
CSS3 Transitions On ios Slow/Not Working
我正在尝试在我正在制作的响应式网站上开始使用一些 CSS3 转换,并且在桌面 Chrome 和 Chrome Android 上一切正常但它无法在 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);
采用强制硬件加速的样式,但它也不起作用。我看不出任何变化。任何帮助将不胜感激。
避免使用占用大量资源的绝对定位转换,而是尝试使用transform: translateX(0)
进行水平调整
我正在尝试在我正在制作的响应式网站上开始使用一些 CSS3 转换,并且在桌面 Chrome 和 Chrome Android 上一切正常但它无法在 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);
采用强制硬件加速的样式,但它也不起作用。我看不出任何变化。任何帮助将不胜感激。
避免使用占用大量资源的绝对定位转换,而是尝试使用transform: translateX(0)
进行水平调整