mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/common.less
Stephen Niedzielski 83f90dacad [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
2019-08-08 13:17:13 -06:00

56 lines
1.5 KiB
Plaintext

@import 'mediawiki.mixins.less';
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
.view-border-box *,
.view-border-box {
.box-sizing( border-box );
}
/* Hide the table of contents `.toc-mobile` unless the user is viewing in tablet resolution or
* higher */
.toc-mobile,
/* Table of contents `.toc` as provided by parser has no styling, this is a temporary measure
* until we are able to commit more time to Minerva on desktop */
.toc,
/* We also need a more specific rule for tablet non-JS users who will load skins.minerva.tablet.styles */
.client-nojs .toc-mobile,
.client-js .mw-redirectedfrom,
/* FIXME: Use generic rule for print stylesheets */
.printfooter,
.jsonly {
display: none;
}
/* TODO: Fix specificity */
/* stylelint-disable no-descending-specificity */
.client-js .jsonly {
display: inherit;
}
// currently used to hide talk button
.hidden {
display: none !important;
}
#mw-mf-viewport {
position: relative;
height: 100%;
}
// We need to ensure the content has the chrome background - otherwise it will
// overlap the menu during the main menu reveal/hide animation
#mw-mf-page-center {
width: 100%;
position: relative;
background-color: @chromeColor;
}
.content {
// 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;
}