CODEWITHSUNDEEP
cssreactjssvg
Neablis
Neablis

Reputation: 914

css border artifacts from inline svgs

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.

The black borders around the text between the images

Adding 

{ 
    backface-visibility: hidden;
}

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

Upvotes: 3

Views: 680

Answers (2)

Neablis
Neablis

Reputation: 914

The issue was caused by a background image on body using a &:before tag with a z-index.

body {
    background-color: rgba(14, 19, 28, 1) !important;
    background-image: 'background image url';
    background-blend-mode: lighten;
    background-repeat: repeat;
    background-clip: padding-box;
    color: white;
    min-height: 100vh;

    &:before {
      z-index: -10;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: .5;
      background: linear-gradient(to bottom, rgb(14,19,28) 0%, rgb(0,0,0) 60%, rgb(80, 130, 160) 100%);
    }
  }

This was fixed by adding to the &:before 

body {
   &:before {
      -webkit-transform: translate3d(0,0,0);
      backface-visibility: hidden;
   }
}

as coffeebot suggested.

Upvotes: 0

rpivovar
rpivovar

Reputation: 3438

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;.

Upvotes: 1

Related Questions