Question

我在网页上显示了SVG图形，并且我注意到在某些计算机上，填充Rect的复杂linearGradient不能正确显示所有Stop，而在其他计算机上，它可以正常显示。

如果我转到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

小提琴中的示例渐变：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）的已知问题。我已经解决了此问题，方法是将线性渐变替换为一个模式（使用矩形复制渐变色标），该模式像以前一样用作路径对象的填充。

Answer 1

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

我有一种感觉，当它应该允许GPU进行处理时，您实际上看到了CPU栅格化问题以提高性能。阅读了一些GPU栅格化问题后，如果没有应用硬件加速，听起来好像无法正常工作。

您可以强制元素使用CSS进行硬件加速

.element {
  transform: translateZ(0);
}

由于需要将其关闭，我有点困惑，因为台式机上的gpu-rasterization仍被标记为必须启用的flagged feature。如果您的问题在移动设备上，则需要弄乱HTML文件中的<meta name="viewport">标签。这是documentation。

如果您可以始终如一地复制问题，则可能发现了应该为reported to the Chromium team的错误。

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

1 个答案: