CSS动画只在iPad上崩溃Safari

Question

我的网站在iPad上的Safari浏览器上崩溃，而且只有在iPad上才会出现这个问题。我在头部使用CSS3动画来播放一张大图片（4800 x 374像素，但只有336 KB），大约十秒后，这就导致Safari崩溃。

您可以在http://bakabaka.nl/preview/leuk/查看此网站。

我能否防止这种崩溃？如果可以，该如何操作？我能否使动画运行更加流畅？现在它非常卡顿...

- Bakabaka

---

可能有用的是，我正在使用WordPress运行此网站，但我真的不知道那会影响到什么。 - Bakabaka

Answer 1

我不确定这是否有效，但也许值得一试。

我的建议是在iOS上使用3D动画，因为它可以利用硬件加速：

-webkit-transform: translate3d(X,Y,Z);

更多信息请参见此处：'3D变换函数'

iOS上可能会出现特别大的图片问题。最好的解决办法可能是将它们分割成几部分。详情请参阅："了解iOS资源限制"

- insertusernamehere

---

那个方法非常有效。我最终使用了一个translateX动画，只针对webkit（独立于操作系统），这解决了问题。谢谢！ - Bakabaka

现在我的iPhone看起来非常时尚。很高兴能够帮忙。 :) - insertusernamehere

小心，我实际上是通过删除那行代码而不是添加它来解决了我的 CSS 过渡问题。我不知道为什么它起作用了。 - Quickredfox

这要看情况。如果你在许多元素上频繁使用这个CSS规则，它可能会导致Safari变慢甚至崩溃。但是在像这样的情况下，你只是将某些东西从左到右进行动画处理，它可以受益于硬件加速，所以很好用。因此，如果没有实际看到你的代码，很难说出是什么原因导致你的代码无法工作。 - insertusernamehere

Answer 2

我也遇到了类似的问题。如果还有其他人正在为此苦恼，这会导致桌面版和iOS版的Safari崩溃。它非常不喜欢::window-inactive选择器。

::-webkit-scrollbar-thumb:window-inactive {
     background: #f2f2f2; 
}

- Rob Erskine