Mix-blend-mode bug on text

Question

I am working on a knockout text using mix-blend-mode property. When I open the console to use Developer tools to test responsiveness, there are little lines that appear and disappear above and below of the blended text. On every selection, I do on the device selector of the developer tools console, this bug is presented. These are some examples:

Page resized to iPad Pro size

Page resized to Pixel 2XL size

This is the code I use to create this text:

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

I notice that this bug does not happen when you run the code on Codepen and I could not figure out why is that. However, it can happen on a simple static HTML file.

I tried to use will-change: opacity described here and here, but I had no luck.

My chrome version is Version 78.0.3904.108. This bug only happens on Chrome. I would appreciate it if anyone can give advice about this.

That's an antialiasing *bug*. You can repro on desktop by translating by fractions of a pixel: https://jsfiddle.net/93daepz0/. You may open an issue at https://bugs.chromium.org/p/chromium/issues/list but note that even FF and Safari have the same bug, and that your users on real devices may not face it in your configuration (since they wouldn't have the weird transform the dev-tools are doing to emulate the different monitors). — Kaiido, Nov 29 '19 at 09:12

Viral · Answer 1 · 2019-11-29T05:18:17.350

If you are result-oriented then this solution might help you to get rid of this issue. I have also checked with mix-blend-mode but as you said there is an issue in Chrome.

I have used background-clip: text to achieve the same result.

Page resized to iPad Pro size

Page resized to Pixel 2XL size

Please let me know if this helps.

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

Thanks for this. However, I need to keep with this approach because I need to have the background separated from the text — Leo, Nov 29 '19 at 05:19

Mix-blend-mode bug on text

1 Answers1