我正在使用 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: opacityhere和 here ，但我没有运气。
我的 Chrome 版本是版本 78.0.3904.108。此错误仅发生在 Chrome 上。如果有人能就此提出建议，我将不胜感激。
最佳答案
如果您注重结果，那么此解决方案可能会帮助您解决此问题。我还检查了 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>关于html - 文本上的混合混合模式错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59097885/