基于“平滑度”的CSS Transition回退

Question

我有一个在不同屏幕之间“转换”的Web应用程序（HTML / CSS / JS） - 屏幕相当复杂 - 它们上面有许多元素。实际上，它非常像http://beta.usatoday.com/，除了它上下左右。 （它可能稍微复杂一些）。

所以我使用CSS3过渡来管理视图之间的滑动。在我的机器上，它们光滑美观，应用程序看起来非常好。然而，在较旧的机器上，体验不那么令人满意。例如配备集成显卡的Core2Duo笔记本电脑 - 大约3年前。在这个，我得到了真正的跳跃过渡，过渡需要很长时间。它们的持续时间为0.3秒，但是，在较旧的机器上，它们需要4/5秒。

所以我的问题是：

• 如何提高旧硬件的平滑度？
• 如果我不能，是否有办法根据硬件（或通过测量过渡实际持续时间）进行后备，以便我可以设置位置？

Answer 1

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

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

另一种解决方案与过渡期间如何渲染背面可见性有关。对此的修复是添加以下内容，即使背面之前没有被更改过。

-webkit-backface-visibility: hidden;

如果没有看到你的代码，很难说这些代码是否会有所帮助，而是试一试（显然是在浏览器的相应前缀中）。