Currently, I am experimenting with knockout text using the mix-blend-mode
property. An interesting issue arises when I examine the responsiveness of my design by utilizing Developer tools in the browser console - there are faint lines that momentarily appear above and below the blended text. Interestingly, this bug seems to occur whenever I adjust the device selector in the developer tools console. Below are some instances where this anomaly occurs:
Page resized to iPad Pro size
https://i.sstatic.net/2ASNe.png
Page resized to Pixel 2XL size
https://i.sstatic.net/1nQQU.png
This is the code snippet I am employing to generate the knockout text effect:
.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 have observed that this peculiar bug does not manifest when running the code on Codepen, although it persists when working on a simple static HTML file.
Attempts to rectify this issue using will-change: opacity
as discussed here and here proved unsuccessful.
The version of Chrome I am using is Version 78.0.3904.108. Remarkably, this bug exclusively surfaces in Chrome. Any insights or advice from anyone who has encountered a similar issue would be greatly appreciated.