html - 您可以在特定 SVG 元素上禁用 Google Chrome 中的 gpu 光栅化吗？

Question

我在网页上显示了一个 SVG 图形，我注意到在某些计算机上，填充 Rect 的复杂 linearGradient 没有正确显示所有的 Stops，而在其他计算机上它显示正常。

如果我前往 chrome://flags 并将“GPU 光栅化”设置为“已禁用”，那么渐变会在所有计算机(我已经测试过)上正确呈现。

有没有办法通过 HTML/CSS/Javascript 强制 Chrome 在没有 GPU 光栅化的情况下显示 SVG，以便它能为我的所有用户正确显示？

Image of incorrectly displayed gradient with GPU rasterization enabled (or defaulting to enabled) in Chrome

Image of correct gradient with GPU rasterization disabled in Chrome

Fiddle 中的渐变示例:https://jsfiddle.net/dynoben/6v7fLq5a/8/

<svg width="500" height="200">
  <defs>
    <linearGradient id="gradient"></linearGradient>
  </defs>
  <rect width="500" height="200" style="fill:url('#gradient')"></rect>
</svg>
<script>
d3.select('#gradient').selectAll('stop').remove();
var stopCount = 200;
d3.select('#gradient').selectAll('stop')
 .data(d3.range(0,stopCount,1)).enter()
 .append('stop').each(function(d,i){
   var item = d3.select(this);
   item.attr('stop-color', i%2==0 ? '#000000' : '#ffffff');
   item.attr('offset', 100*i/stopCount+'%');
});
</script>

请注意，这似乎只是使用 Chrome 的问题。

更新:这是 Chrome 的一个已知问题 (https://bugs.chromium.org/p/chromium/issues/detail?id=892711&desc=5)。我通过将 linearGradient 替换为一个模式(使用 rects 复制渐变停止点)来解决它，该模式像以前一样用作路径对象的填充。

Answer 1

如果您强制使用硬件加速，是否可以解决问题？

我有一种感觉，你实际上看到了 CPU 光栅化内容的问题，以提高性能，而它应该允许 GPU 执行它。在阅读了一些 GPU 光栅化问题后，如果未应用硬件加速，这听起来似乎无法正常工作。

你可以强制元素使用 CSS 获得硬件加速

.element {
  transform: translateZ(0);
}

自 gpu-rasterization 以来，我对关闭它的必要性感到有点困惑。在桌面上仍标记为 flagged feature你必须启用。如果您的问题出在移动设备上，则需要弄乱 <meta name="viewport"> HTML 文件中的标记。这是 documentation .

如果您能够始终如一地重现该问题，您可能发现了一个应为 reported to the Chromium team 的错误。 .