在 Mobile Safari 中旋转期间出现断断续续的 SVG 渲染答案

【问题标题】：Choppy SVG rendering during rotation in Mobile Safari在 Mobile Safari 中旋转期间出现断断续续的 SVG 渲染
【发布时间】：2016-12-20 12:50:54
【问题描述】：

有一个非常棘手的问题，我一直在努力解决。本质上，我正在构建一个大型旋转轮，该轮具有多个以不同速度旋转的元件。它大约是 5000px 正方形，但视口是窗口高度的百分比。由于缩放，轮子本身是一个 SVG，因此它在所有设备上看起来都很清晰。 SVG 在某些地方有一些相当复杂的路径。

这很难解释，所以我做了一个简单的演示：http://jsfiddle.net/UsVeZ/3/embedded/result/（在此处编辑：http://jsfiddle.net/UsVeZ/13/）。单击/点按文档以查看它的旋转。

一切看起来都很好，它在桌面（Chrome + Safari）上运行良好，但是当我在 iPad 上旋转滚轮时，移动 safari 会滞后于渲染。旋转动画本身还算流畅，只是渲染跟不上。我的复杂 SVG 更糟糕（不幸的是，我不允许分享，但演示给出了一个想法）。在 iPad 上查看一下，了解我的意思。

我不太确定如何解决这个问题 - 理想情况下，如果有某种方法可以将整个 SVG 保存在内存中（不确定渲染的具体工作原理或它为什么会这样做），那就太好了。如果有人有任何想法，甚至有不同的处理方式，那就太棒了。

【问题讨论】：

标签： css svg mobile-safari css-transforms

【解决方案1】：

这不是一个完整的答案，只是您可以遵循的几个策略。

如果你申请...

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 似乎不会缓存视口之外的任何图形。所以，也许如果你让轮子在加载时完全旋转，它会缓存图像。

【讨论】：

再次感谢您的建议，您真的很有帮助:)。我尝试了其中一些想法，但似乎没有任何效果，所以我恢复了图片。

【解决方案2】：

所以我无法在我的真实示例中正确解决这个问题。我最终恢复到图像（我将我的大图像分成 9 个较小的图像并将它们平铺以绕过 iOS 的 5mp 限制），并且在每张图像上我应用了以下似乎缓存图像的属性：

-webkit-transform-style: preserve-3d;

它不能很好地扩展，但它运行顺畅，这一点更重要。

【讨论】：

【解决方案3】：

我实际上采用了几个不同的 SVG 并在 iOS 中对它们应用了旋转，并在我旋转它的瞬间添加了这个框。我无法在 Safari 或 Chrome（桌面）中复制它。尝试了一堆不同的东西来让它停止，但没有运气。我无法在网上找到很多关于它是否是错误的反馈。

只需应用 -webkit-transform: rotate(122deg);

例如 - http://bit.ly/QnAgFK

我发现某些 [object] 标记有 #documents 在 Safari 6 的 svg 周围添加 [html][body] 标记。其他的则没有。所以我的假设是这是一个 mime 类型的主机问题，但我已经为 .svg 添加了 image/svg+xml mime-type。

【讨论】：

示例链接已损坏 :(

【解决方案4】：

我对这个有一个肮脏的修复。

#topParentId *{
   -webkit-transform-style: preserve-3d !important;
}

我已将 css 应用于 topParentId Id 的每个孩子，这对我来说很好。它在输出中改变了一点 css，但对我来说效果很好。

【讨论】：