Chrome flickering on -webkit-filter: blur

google chrome flickering mac
google chrome flickering android
google chrome flickering windows 7
chrome flashing between tabs
blinking tabs in chrome
google chrome flickering screen windows 10
google chrome flickering when scrolling
google chrome flickering 2019

I'm applying a blur transition to the body of my page

body
    transition(all 1s)
    &.blurred
        pointer-events none
        transition(all 1s)
        -webkit-filter blur(5px)

Chrome flickers when I add the blurred class to body, whereas Safari does not.

http://jsfiddle.net/j89Zs/

Adding -webkit-backface-visibility: hidden does not solve this. It seems to eliminate the first flicker, but Chrome keeps flickering after the blur is applied, especially if body contains a lot of content/divs.

Is there any way to achieve the same effect, without the flickering?

I'm not seeing the flicker (Chrome 35.0 on OSX Mavericks) but I find the following often works for solving animation flickering in webkit:

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Google Chrome Pages Flashing/Flickering/Blinking Windows 10 26 , I have two screens, it happens with chrome on both and on only one, happens with multiple tabs open and only one, sometimes its a white flash  It seems to eliminate the first flicker, but Chrome keeps flickering after the blur is applied, especially if body contains a lot of content/divs. Is there any way to achieve the same effect, without the flickering?

Old question but still for someone who would land here with the same problem: After hours of searching finally realized chrome is got such problems. The closest solution I found was to apply:

filter:blur(0.3px);

Lower the pixel anymore(tried 0, 0.1 and 0.2) and it goes blank.

This will slightly lower the clarity but to a very minimal/unnoticeable Level(much better than the flicker).

Mac OS X Chrome Browser experiencing discoloration/line , Below I provided a screenshot where on Mozilla left side the light blue color in center does not flicker, but on right Google Chromes light blue  Tech Enigma > Fixes > Google Chrome Browser Flashing / Flickering FIXED! Here’s a simple solution to the annoying flickering problem that can occur in google chrome browser. Quite often I find I’m browsing a web page and all of a sudden google chrome starts to flicker or flash, usually, if I mouse over the scrollbars it tends to stop, and

The flickering is still there on MacOS Mojave 10.14 in Chrome, in case filter property is applied to an element.

Setting backface visibility to hidden, on the same element, solves the issue:

backface-visibility: hidden;

scale text animation in Chrome flickering and not Firefox, It seems that Chrome is still having the same issue that Firefox once had with the animation flickering. I tried using x, z, scale text animation in Chrome flickering and not Firefox. By milkaWhat the correct one. (blurry text?) This video will show you how to get rid to that irritating black flash that you receive when browsing in Google Chrome sometimes. Screen Flickering When Watching Videos on Facebook Or YouTube

Chrome bug: When I scale an element with background image, the , In this example, the image is flickering when it scaled down with a smooth animation: https://codepen.io/anon/pen/bWpNYq When I add as an  Get more done with the new Google Chrome. A more simple, secure, and faster web browser than ever, with Google’s smarts built-in. Download now.

Avoid CSS flickering, This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element. But use it wisely : this rule  Deprecations and removals in Chrome 81 Adding notification permission data to the Chrome User Experience Report The Chromium Chronicle: Catching UI Regressions with Pixel Tests

How to Fix Screen Flickering with Google Chrome in Windows 10 , If you're experiencing screen flickering in Windows 10 with Google Chrome, here's a simple fix for that problem. It was all working PERFECTLY in firefox/ie and then I tested it in Chrome - and found that after a short delay, my zoomed image became blurry after changing the zoom level. I've tried all the solutions out there (webkit-filter: blur(0), image-rendering, adding a pseudo element, trying to force it to re-render etc) but haven't managed to solve

Comments
  • Sadly, there isn't much we can do about Chrome's terrible rendering issues. I wish they'd take the time to get things right before releasing new features...
  • I'm not seeing the flickering. It does a smooth transition from normal to a blur. Specific version of Chrome? Desktop version?
  • Just started seeing this as well (Stable 34.0.1847.137) Things look better in Canary 37.0.2002.0 using backface visibility: hidden