css border artifacts from inline svgs

Question

I am working with a react app in chrome that involves a lot of inline svgs.

The text will have black borders randomly around it if its near an inline svg. It will sometimes disappear or appear as I highlight text.

The only thing that's consistent is there is an inline svg on every page where the border appears.

Adding

{ 
    backface-visibility: hidden;
}

On a element with the border fixes it, but its not feasible to add it everywhere.

Answer 1

You could also try -webkit-transform: translate3d(0,0,0); - that also seems to help in this kind of situation, along with backface-visibility: hidden;.