From d939812682e42a2d0f34c75d6043fb0b510a9466 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Tue, 22 Jun 2021 14:07:01 -0700 Subject: [PATCH] Avoid flash of background color by moving gray background color to element that is not a compositing layer --- packages/edit-post/src/components/layout/style.scss | 4 ---- packages/edit-post/src/components/visual-editor/style.scss | 5 +++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index ef28ff4124f03..e996ab588d163 100644 --- 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 index 0d0e982642979..38f8b91e4846c 100644 --- 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.