基于"smoothness"的 CSS 过渡回退



我有一个web应用程序(HTML/CSS/JS),它可以在不同的屏幕之间"转换"——屏幕相当复杂——上面有很多元素。事实上,这很像http://beta.usatoday.com/除了上下以及从左到右。(它可能不那么复杂)。

因此,我使用CSS3转换来管理视图之间的滑动。在我的机器上,它们光滑漂亮,应用程序看起来真的很好。然而,在较旧的机器上,体验就不那么令人满意了。例如,一台集成图形的Core2Duo笔记本电脑——大约3岁。在这个问题上,我得到了非常跳跃的过渡,过渡需要很长时间。它们的持续时间设置为0.3秒,但在较旧的机器上,它们需要4/5秒。

所以我的问题是:

  • 我可以做些什么来提高旧硬件的平滑度
  • 如果我做不到,有没有一种方法可以基于硬件(或通过测量过渡的实际持续时间)进行回退,这样我就可以设置位置了

对于某些浏览器版本和移动浏览器,webkit中存在一个错误,导致转换非常滞后。对我有效的修复之一是添加:

-webkit-transform: translate3D(0, 0, 0);

另一个解决方案与如何在过渡期间渲染背面可见性有关。解决方法是添加以下内容,即使背面之前没有更改。

-webkit-backface-visibility: hidden;

如果没有看到你的代码,很难说这些是否会有帮助,但请尝试一下(显然,在浏览器的适当前缀中插入sub)。

相关内容

  • 没有找到相关文章

最新更新