ios上的CSS3过渡慢/不工作

Posted

技术标签:

【中文标题】ios上的CSS3过渡慢/不工作【英文标题】:CSS3 Transitions On ios Slow/Not Working 【发布时间】:2017-03-04 23:06:16 【问题描述】:

我正在尝试在我正在制作的响应式网站上开始使用一些 CSS3 过渡,并且在桌面 Chrome 和 android 上的 Chrome 上一切正常,但它在 Chrome 和 Safari 的 ios 设备上无法正常工作。

例如,我用于菜单的 CSS sn-p 如下:

#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);

强制硬件加速的样式,但它也不起作用。我看完全没有变化。任何帮助将不胜感激。

【问题讨论】:

避免使用绝对定位过渡会占用大量资源,而是尝试使用transform: translateX(0) 进行水平调整 @Swordys 我会检查一下。我之前并没有真正搞砸过“转换”,因为直到最近我才真正尝试过转换,尤其是在移动设备上。对于不改变定位但在最大高度和不透明度上有过渡的元素,我也遇到了同样的问题。最好只对所有这些都使用转换吗? 是的,如果您在绝对元素上使用大量过渡,则会对性能产生很大影响。使用过渡是获得流畅体验的最佳实践。您也可以尝试使用will-change: transform 强制硬件加速,但目前 safari 浏览器不支持。 @Swordys 更改为 transform: translateX(0) 方法有很大帮助。菜单现在完全流畅了。如果您想让这个问题成为一个很好的实际答案,那么我可以将其标记为正确答案并给予您信任。谢谢。 当然,很高兴我能帮上忙。 【参考方案1】:

避免使用绝对定位过渡会占用大量资源,而是尝试使用transform: translateX(0)进行水平调整

【讨论】:

这非常适合菜单。关于如何让transition: max-height 1s, opacity 1s 不波涛汹涌/只是弹出的任何建议?我似乎找不到不透明度或最大高度的转换。 您是否尝试过使用任何转换计时功能,如ease-outease 秒后指示器? 我尝试过使用 ease-in-outeaselinear ,这是同一回事。我刚刚做了一个快速测试,问题出在max-height 上的转换。 opacity 过渡平稳,但是当我尝试过渡 max-height 时,它是跳动的。我正在做的是一种过渡到height: auto; 的解决方法,因为这不起作用。 高度过渡也很昂贵,最好的办法是给该元素固定高度,然后像前面的例子一样使用transform: translateY() 来实现垂直弹出效果。还要设置它的父元素oveflow: hidden,这样它就可以隐藏在它后面。 这是有道理的。如果你有几分钟的时间可以查看这个 jsfiddle,我很快就展示了我试图用 max-height 来完成的事情。 link 我让这些“选项 div”出现在任何按钮/链接打开它们的下方,它们都有不同的高度等。我不确定如何让 translateY 在它仍然出现的地方工作如果有意义的话,正确的位置不会在两个按钮之间显示出巨大的间隙。

以上是关于ios上的CSS3过渡慢/不工作的主要内容,如果未能解决你的问题,请参考以下文章

多个 css3 过渡类型不使用“全部”

iphone 4 android 4.1 上的平滑 CSS3 过渡

CSS3 动画过渡:不透明度不起作用

Chrome 中的 CSS3 过渡故障

IOS上的CSS转换事件非常慢

CSS3不透明度转换的Webkit问题?