SVG fill artifact in Chrome

Question

I have one polygon path, which is filled with a color. This works perfectly in Firefox and IE.

In Chrome depending on size - artifacts appear. In the example here, there is a diagonal gradient, instead of a plain color.

Question, how can I solve this, or what workarounds exist?

If the bug is not visible, width has to be changed, as its not always triggered. In JSFiddle that is very simple, as the size of the preview container can be easily changed.

The bug only happens when shaperendering is not set to crispedges.

svg {  
    backface-visibility: hidden;
    width:50%;
}
.auto {
    fill: #37d0cd;
    shape-rendering: auto;
}
.crisp {
    fill:#37d0cd;
    shape-rendering: crispedges;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="auto">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="crisp">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

Link to JSFiddle

Screenshot from the JsFiddle demonstrating the bug:

It could be related to [this Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=691262). You may want to report it at crbug.com and let them decide. — Paul LeBeau, Sep 07 '17 at 13:11
Same problem most likely: https://stackoverflow.com/questions/41946156/strange-diagonal-lines-in-chrome-chromium-bug — user5542121, Sep 07 '17 at 15:09

score 2 · Accepted Answer · answered Sep 07 '17 at 08:49

So I found a workaround - but it feels like a hack. Therefor I am not really happy with the solution; I hope there is a better way.

Basically the fill color gets shape-rendering crispedges - which creates a pixelated border. To get rid of the pixelated border, I add same path again gave it a transparent fill and shape-rendering auto.

svg {  
    backface-visibility: hidden;
    width:50%;
}
.auto {
    fill: #37d0cd;
    shape-rendering: auto;
}

.crisp .a {
   stroke: #37d0cd;
   fill: transparent;
   shape-rendering: auto;
}

.crisp .b {
   fill: #37d0cd;
   stroke:transparent;
   shape-rendering: crispedges;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="auto">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="crisp">
    <path class="b" d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
    <path class="a" d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

Link to JSFiddle

SVG fill artifact in Chrome

1 Answers1