Strange diagonal lines in Chrome/Chromium (bug?)
It's almost certainly this Chrome/Chromium rasterization bug, which appears to be specific to certain NVidia GPUs:
As indicated above it is a GPU issue but the temporary workaround works great for me:
div { position: relative; z-index: 0;}div:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: inherit;}
I was having the same issue in Chrome but I finally found that cleaning up the svg file solved the issue. I used SVGO https://github.com/svg/svgo.