[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
This commit is contained in:
Stephen Niedzielski 2019-08-08 13:09:50 -06:00
parent 78748794c6
commit 83f90dacad
1 changed files with 4 additions and 2 deletions

View File

@ -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;
}