There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine.
I discovered that if I disable "GPU rasterization" in Chrome by going to chrome://flags, the gradient renders correctly on all tested computers.
Is there a way through HTML/CSS/Javascript to compel Chrome to render the SVG without GPU rasterization so it displays accurately for all users?
This image depicts the correct gradient with GPU rasterization disabled in Chrome
You can also view the example gradient in this 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>
This problem seems to be specific to Chrome.
Update: It has been identified as a known issue with Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=892711&desc=5). As a workaround, I have replaced the linearGradient with a pattern (using rects to simulate gradient stops), which is then applied as the Fill for the path element as before.