Missing or Flickering Elements

• Component: Compositing
• Status: RESOLVED DUPLICATE

[Kerry]

Created attachment 432933 [details]
Test case for flickering text

In the WordPress Block Editor, we were seeing elements flicker in Safari and the Safari Technology preview 127 in https://github.com/WordPress/gutenberg/issues/30803.

I've narrowed this down to a test case, which I've attached. It's also available at https://codepen.io/gwwar/pen/dyWYdmg

It should look like https://user-images.githubusercontent.com/1270189/124388676-c0a34f80-dc98-11eb-8987-aa0e6001c10c.mp4 with the bad behavior.

It's a little bit of a complex setup, requiring flex styles, an iframe, two fixed divs, and some z-index stacking contexts. We're are able to consistently reproduce this, so I do feel it's worthwhile to report. Let us know if folks have trouble reproducing or if y'all need more information. Thanks!

[Kerry]

If it helps, there's also a few other videos available at https://github.com/WordPress/gutenberg/pull/32824#issuecomment-873280550 

Elements disappear or end up being ordered incorrectly when the iframe in .components-popover intersects with .block-editor-block-list__layout and causes a new compositing layer to be created.

[zalan]

Created attachment 432947 [details]
Test reduction

[Simon Fraser (smfr)]

Created attachment 432961 [details]
smfr testcase

[Simon Fraser (smfr)]

Same as bug 220892, confirmed that the patch fixes it.

*** This bug has been marked as a duplicate of bug 220892 ***

[Kerry]

Great to know this already had a patch fix! Thanks for looking into it.