CODEWITHSUNDEEP
htmlcssgoogle-chromemix-blend-mode
Leo
Leo

Reputation: 1231

Mix-blend-mode bug on text

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

enter image description here

Page resized to Pixel 2XL size

enter image description here

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.

Upvotes: 2

Views: 579

Answers (1)

Viral
Viral

Reputation: 949

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

enter image description here

Page resized to Pixel 2XL size

enter image description here

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>

Upvotes: 2

Related Questions