CODEWITHSUNDEEP
cssgoogle-chromebackground-blend-mode
Raphael Jeger
Raphael Jeger

Reputation: 5232

Flickering on elements, Chrome only, with background-blend-mode only

We run the website www.desirio.com which uses a background-image on the body with

background-blend-mode: luminosity

In Chrome, when you hover over elements, you see strange white lines randomly blink "somewhere". When you remove bg-blend-mode (pay attention to remove it twice if you try it out with the debugger, as it's there in the CSS-rules twice on the body), flickering is gone.

It looks like this:

screenshot of chrome flicker

We are running Chrome 62 on OSX, but've seen it happen on other versions as well.

Upvotes: 1

Views: 525

Answers (1)

glenmyles
glenmyles

Reputation: 13

Chrome troubles to apply the background-blend-mode on larger container such as 

<body>

Take if off there and put it into your hero-section

.hero-section{
    background-blend-mode: luminosity;
}

Upvotes: 1

Related Questions