Menu
Just using 'mix-blend-mode:overlay' on a text element and it causes my browser to scroll really slow while the text is in the screen view. As soon as you scroll past the text item, the scroll goes back to butter smooth.
The lag effect, which affects both chrome and firefox is solved if I remove the mix-blend-mode.
Has anyone else had a similar problem with mix-blend-mode?
396
💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
difference : this subtracts the darker of the two colors from the lightest color. exclusion : similar to difference but with lower contrast. hue : creates a color with the hue of the content combined with the saturation and luminosity of the background.
Using the background-blend-mode property, you can blend the background layers (images and color) of an element. The property takes one or more blend modes as a value—this value specifies the formula used to blend or mix the colors of the background image with the color — or other background images — behind it.
Not sure if this will help you in your case, but I had a 'transform: scale(-1);' set on element that had 'mix-blend-mode' enabled. When I removed the transform the performance was silky smooth! So, if you're using any sort of 'transform' I'd remove it and look for an alternative solution if possible.
It may also help if you set 'isolation' property to the layer beneath, as per example here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#HTML_example
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
