Avoid flash of background color by moving gray background color to el…

…ement that is not a compositing layer
WordPress · Jun 22, 2021 · febc370 · febc370
1 parent 77bc9ca
commit febc370
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -85,7 +85,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout .interface-interface-skeleton__content {
-	background-color: $gray-800;
-}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -3,6 +3,11 @@
 	display: flex;
 	flex-flow: column;
 
+	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
+	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
+	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
+	background-color: $gray-800;
+
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
 	// This is duplicated in edit-site.