Strange flicker/re-render problem in Chrome with Popover component

[SlowburnAZ]

Problem description

Getting a flickering effect after a Popover closes, and sometimes as it opens. Seems that everything is re-rendered multiple times... watching the body element in the developer console confirms that it's being re-rendered several times when this happens. Doesn't happen every time, but enough that it's very distracting.

This happens both in my own project, and on the Material UI demo page.

This seems to be only happening for me in Chrome. Firefox (version 47.0) doesn't have the same problem.

Steps to reproduce

(In demo page): Go to the Popover component demo. Click button to open Popover, then click somewhere else to close it. Like I said, it doesn't happen every time, but a few clicks should get it to happen.

Versions

• Material-UI: 0.15.2
• React: 15.1.0
• Browser: Google Chrome Version 51.0.2704.106 (64-bit)
• OS: Ubuntu Gnome 16.04

[SlowburnAZ]

Here's an example...

[SlowburnAZ]

Hmmm... seems this is a known issue with Google Chrome on Linux (and in my case, Chromium and Vivaldi browsers, too).

A workaround that seems to work can be found here: https://productforums.google.com/forum/#!topic/chrome/CtKF2BiskT8

[aahan96]

@SlowburnAZ The link is broken

[SlowburnAZ]

@aahan96 I'm not sure why the link isn't working from within Github, but if you copy that link into a new browser window, it should work.

The answer on that page that worked for me is in this comment: https://productforums.google.com/d/msg/chrome/CtKF2BiskT8/BBnijKhdBwAJ

(Again, you'll have to copy that link into a new browser window for it to work...)

[aahan96]

@SlowburnAZ I saw that link, but am unable to locate the comment. Can you please copy the solution and paste it in the comments box?

[SlowburnAZ]

The comment is from Hector Jerezano:

"Found out that having this flags --disable-gpu-driver-bug-workarounds --enable-native-gpu-memory-buffers and also enable-zero-copy ENABLED with version 51 does a better job I am not seeing any flicker so far!"

So, he adds the flags to the Chrome executable, and in chrome://flags, he sets the "Zero-copy rasterizer Mac, Windows, Linux, Chrome OS, Android" flag to Enabled.

[aahan96]

@SlowburnAZ It's a browser issue and not a MUI issue. I think we should close it for now.