From 83f90dacad5869570bd4a16ff7dd38cca2d92cfb Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Thu, 8 Aug 2019 13:09:50 -0600 Subject: [PATCH] [fix] [Visual Editor] [LESS] [content] create stacking context differently b96ab7bd created a new CSS stacking context[0-1] for .content. Unfortunately, this triggered a browser bug[2] which affects VE edit cards (an unwanted margin appears around them). This also occurs when creating a stacking context with filters. The issue does not occur when the stacking context is created by changing position or opacity. Replace the identity transform a `position: relative`. [0] https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ [1] https://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context?answertab=votes#tab-top [2] https://bugs.chromium.org/p/chromium/issues/detail?id=20574 Bug: T230154 Change-Id: I23ad776f0bcde8f7eec5ffbdefb8f0825db084ec --- resources/skins.minerva.base.styles/common.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/skins.minerva.base.styles/common.less b/resources/skins.minerva.base.styles/common.less index e2e1367..1e95d14 100644 --- a/resources/skins.minerva.base.styles/common.less +++ b/resources/skins.minerva.base.styles/common.less @@ -47,7 +47,9 @@ } .content { - // Create a new stacking context. - transform: scaleY( 1 ); + // Create a new stacking context. `transform: translateZ( 0 );` would be preferred but that + // triggers a browser bug which affects the edit cards in Visual Editor: + // https://bugs.chromium.org/p/chromium/issues/detail?id=20574 + position: relative; z-index: @z-indexBase; }