CSS3转换在iOS慢/不工作
问题描述:
我想开始使用一些CSS3转换在我做的响应网站上,一切工作完美的桌面Chrome和Android上的Chrome,但它不能在ios设备上正常工作的两个Chrome和Safari。CSS3转换在iOS慢/不工作
的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浏览器它是非常不连贯或它只是延迟一秒钟,然后立即弹出。在我所有的转换中都是这样做的,但为了简单起见,我只显示一个菜单。
我已经做了google搜索,并通过堆栈寻找,但我真的发现的唯一的事情说了很多,以添加以下内容:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
的风格给力的硬件加速,但它不工作要么。我看不出有任何改变。任何帮助,将不胜感激。
答
避免使用它需要大量资源的绝对定位的转变,而不是尝试使用它需要大量资源的绝对定位的转换使用transform: translateX(0)
进行水平调整
避免的,而不是尝试使用'变换:平移X(0)'用于水平调整 – Swordys
@Swordys我会给你一张支票。我之前并没有真正与'变形'混为一谈,因为直到最近我还没有真正尝试过渡,尤其是不适合移动。我也有同样的问题,不断变化的/不工作的元素,不改变定位,但有最大高度和不透明度的过渡。对所有人使用变换最好吗? – Jetteh22
是的,如果你在绝对元素上使用很多转换,它会对性能产生很大的影响。使用转换是顺畅体验的最佳实践。您还可以尝试使用'will-change:transform'来强制硬件加速,但目前Safari浏览器不支持它。 – Swordys