我已经尝试解决了一个非常棘手的问题。本质上，我正在构建一个大型旋转轮，其中包含多个以不同速度旋转的元素。它约为5000像素见方，但视口是窗口高度的百分比。由于缩放，轮子本身是SVG，因此在所有设备上看起来都很清晰。 SVG在某些地方具有一些相当复杂的路径。
很难解释，所以我对我在说的内容做了一个准系统的演示：http://jsfiddle.net/UsVeZ/3/embedded/result/（在这里编辑：http://jsfiddle.net/UsVeZ/13/）。单击/点击文档以查看其旋转。
一切看起来都不错，并且在桌面（Chrome + Safari）上也能很好地工作，但是当我在iPad上旋转滚轮时，移动浏览器会滞后于渲染。旋转动画本身非常平滑，但是仅仅是渲染无法跟上。我使用复杂的SVG会更糟（不幸的是，我不允许共享该SVG，但演示给出了一个想法）。在iPad上查看，了解我的意思。
我不太确定如何解决此问题-理想的情况是，如果有某种方法可以将整个SVG保留在内存中（不确定确切的渲染方式或执行工作的原因）。如果有人有任何想法，甚至有不同的解决方法，那将是惊人的。
最佳答案
这不是一个完整的答案，您可以遵循几个策略。
如果您申请...
body {
-webkit-transform: scale(0.3);
}
您将看到Mobile Safari如何缓存svg，如何像素化然后正确呈现。如果您点击并等待，再次点击时它将重新缓存图像。但是，如果连续点击，您会发现您没有机会重新缓存图像。
这也发生在您的jsfiddle中，如果您连续不断地点击，最终您将不会得到任何断断续续的块。
因此，如果您不让Safari通过创建无休止的过渡来重新缓存图片，例如...
$("svg").on("webkitTransitionEnd", function(){
rotation -= .01;
$("#large").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + rotation + "deg)");
$("#small").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + ( rotation * 1.5 ) + "deg)");
});
这样，缓存将永远不会过时。
但是，一旦删除了身体的比例，Safari似乎就不会在视口之外缓存任何图形。因此，也许如果您使轮子在负载上旋转满了，它将缓存图像。
关于css - 在Mobile Safari中旋转时不稳定的SVG渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11413758/