인라인 svgs의 CSS 테두리 인공물

Question

많은 인라인 svg가 포함 된 크롬의 반응 앱으로 작업하고 있습니다.

텍스트는 인라인 svg 근처에 검은 색 테두리가 무작위로 표시됩니다. 텍스트가 강조 될 때 때로는 사라지거나 나타납니다.

일관성있는 유일한 점은 테두리가 나타나는 모든 페이지에 인라인 svg가 있다는 것입니다.

국경을 가진 요소에

{ 
    backface-visibility: hidden; 
} 

를 추가하면 그것을 수정,하지만 가능하지 사방을 추가 할 수 있습니다.

Answer 1

backface-visibility: hidden;과 함께 이러한 상황에서도 도움이되는 -webkit-transform: translate3d(0,0,0);을 시도해 볼 수도 있습니다.

Answer 2

이 문제는 Z- 색인이있는 & : before 태그를 사용하여 본문의 배경 이미지로 인해 발생했습니다.

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%); 
    } 
    } 

이

은 &에 추가하여 수정되었습니다 :

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

전에 coffeebot 제안한다.