文本上的混合模式错误

Question

我正在使用mix-blend-mode 属性处理敲除文本。当我打开控制台以使用开发人员工具测试响应能力时，混合文本的上方和下方会出现和消失的小线条。在每次选择时，我在开发人员工具控制台的设备选择器上都会出现这个错误。以下是一些示例：

页面调整为 iPad Pro 尺寸

页面大小调整为 Pixel 2XL 大小

这是我用来创建此文本的代码：

.backdrop {
  background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
  background-size: contain;
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}

.text {
  font: bolder 20vw "Arial";
  text-align: center;
  margin: 0;
}

.screen {
  color: black;
  mix-blend-mode: screen;
  background-color: #fff;
}

<div class="backdrop">
  <p class="text screen">Taitō</p>
</div>

我注意到当您在 Codepen 上运行代码时不会发生此错误，我不知道为什么会这样。但是，它可以发生在一个简单的静态 HTML 文件上。

我尝试使用will-change: opacity 描述here 和here，但我没有运气。

我的 chrome 版本是版本 78.0.3904.108。此错误仅发生在 Chrome 上。如果有人能就此提供建议，我将不胜感激。

Answer 1

如果您以结果为导向，那么此解决方案可能会帮助您摆脱此问题。我也检查过mix-blend-mode，但正如你所说，Chrome 存在问题。

我使用background-clip: text 来达到同样的效果。

页面调整为 iPad Pro 尺寸

页面大小调整为 Pixel 2XL 大小

如果这有帮助，请告诉我。

.backdrop {
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}
.text {
  font: bolder 20vw "Arial";
  text-align: center;
  margin: 0;
}
.screen {
  color: transparent;
  background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: contain;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <div class="backdrop">
    <p class="text screen">Taitō</p>
  </div>
</body>
</html>