I'm developing a SVG editing application with react. All text in SVG is converted into path elements in opentype.js.
At some point, the entire bounding box for some of the path elements is suddenly blacked out. After investigating the problem, I found out that this happens under certain conditions.
- Display SVG in chrome.
- Set the path element's fill attribute to a monotone color (e.g., black, grey)
- Splitting the path element into smaller pieces seems to be correct
Is there any way to get the path element to display correctly in Chrome?
My Chrome version is 85.0.4183.121
I created CSB: https://codesandbox.io/s/stupefied-cloud-q4ivo?file=/src/App.js
--- update ---
It's the actual screenshot. Path element filled in black is here.
And I found the solution written in Answer.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="144"
height="72"
>
<path
fill="black"
d="M10.76 35.47L4.99 35.47Q6.40 24.08 18.04 24.08L18.04 24.08Q29.74 24.08 29.74 36.63L29.74 36.63L29.74 53.82Q29.74 55.86 31.61 55.86L31.61 55.86Q32.24 55.86 33.33 55.62L33.33 55.62L33.33 60.68Q31.89 61.03 29.88 61.03L29.88 61.03Q25.14 61.03 24.50 55.72L24.50 55.72Q19.62 61.03 13.78 61.03L13.78 61.03Q9.95 61.03 7.49 59.03L7.49 59.03Q4.25 56.43 4.25 51.33L4.25 51.33Q4.25 39.48 24.57 38.07L24.57 38.07L24.57 36.63Q24.57 28.90 18.04 28.90L18.04 28.90Q11.29 28.90 10.76 35.47L10.76 35.47ZM24.57 47.36L24.57 42.61Q9.53 43.35 9.53 51.05L9.53 51.05Q9.53 56.21 14.63 56.21L14.63 56.21Q18.11 56.21 21.41 53.54L21.41 53.54Q24.57 51.05 24.57 47.36L24.57 47.36ZM41.34 59.70L41.34 9.28L46.69 9.28L46.69 29.36Q51.08 24.12 56.18 24.12L56.18 24.12Q61.49 24.12 64.83 28.72L64.83 28.72Q68.34 33.64 68.34 42.26L68.34 42.26Q68.34 48.30 66.48 52.91L66.48 52.91Q63.14 61.14 56.04 61.14L56.04 61.14Q50.17 61.14 46.62 55.23L46.62 55.23L45.25 59.70L41.34 59.70ZM54.88 29.21L54.88 29.21Q50.77 29.21 48.41 33.40L48.41 33.40Q46.48 36.84 46.48 42.26L46.48 42.26Q46.48 48.13 48.55 51.86L48.55 51.86Q50.91 56.04 54.95 56.04L54.95 56.04Q58.50 56.04 60.57 52.42L60.57 52.42Q62.72 48.76 62.72 42.26L62.72 42.26Q62.72 35.89 60.26 32.38L60.26 32.38Q58.22 29.21 54.88 29.21ZM97.84 48.23L103.68 48.23Q100.86 61.14 90.07 61.14L90.07 61.14Q83.57 61.14 79.77 55.72L79.77 55.72Q76.32 50.77 76.32 42.61L76.32 42.61Q76.32 34.84 79.56 29.88L79.56 29.88Q83.36 24.12 90 24.12L90 24.12Q100.30 24.12 103.11 35.79L103.11 35.79L97.35 35.79Q95.84 29.14 90.07 29.14L90.07 29.14Q86.41 29.14 84.27 32.52L84.27 32.52Q81.95 36.14 81.95 42.61L81.95 42.61Q81.95 47.95 83.53 51.36L83.53 51.36Q85.68 56.11 90.07 56.11L90.07 56.11Q96.47 56.11 97.84 48.23L97.84 48.23ZM133.31 29.36L133.31 9.28L138.66 9.28L138.66 59.70L134.75 59.70L133.38 55.23Q129.73 61.14 123.82 61.14L123.82 61.14Q118.37 61.14 115.03 55.86L115.03 55.86Q111.66 50.73 111.66 42.19L111.66 42.19Q111.66 35.19 114.19 30.38L114.19 30.38Q117.53 24.12 123.75 24.12L123.75 24.12Q128.92 24.12 133.31 29.36L133.31 29.36ZM125.05 29.21L125.05 29.21Q121.32 29.21 119.14 33.26L119.14 33.26Q117.28 36.91 117.28 42.26L117.28 42.26Q117.28 48.06 119.00 51.64L119.00 51.64Q121.04 56.04 125.05 56.04L125.05 56.04Q128.67 56.04 131.06 52.42L131.06 52.42Q133.52 48.80 133.52 42.26L133.52 42.26Q133.52 36.95 131.66 33.54L131.66 33.54Q129.38 29.21 125.05 29.21Z"
/>
</svg>
It's not a chrome bug, but something to do with HW acceleration. Once I disabled HW acceleration and then enabled it, the bug went away.
Here is the report to Chrome bugtracker. https://bugs.chromium.org/p/chromium/issues/detail?id=1135089