来自内联svgs

Question

我正在使用chrome中的react应用程序，它涉及大量的内联svgs。

如果文本靠近内联svg，文本将在其周围随机出现黑色边框。当我突出显示文字时，它有时会消失或出现。

唯一一致的是在每个出现边框的页面上都有一个内嵌svg。

添加

{ 
    backface-visibility: hidden;
}

在带边框的元素上修复它，但无法在任何地方添加它。

Answer 1

你也可以尝试-webkit-transform: translate3d(0,0,0); - 这似乎也有助于backface-visibility: hidden;这种情况。

Answer 2

问题是由使用带有z-index的＆amp;：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%);
    }
  }

通过添加到＆amp;前面

来解决这个问题

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

正如coffeebot建议的那样。