fix: fix stacking context in Safari/WebKit (#1812)

fixes #1806
2020-07-04 23:17:55 -07:00 · 2020-07-04 23:17:55 -07:00 · 55ded5c234
parent f17096a8ac
commit 55ded5c234
1 changed files with 7 additions and 0 deletions
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@ -21,6 +21,13 @@ body {
 .main-content {
  contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
  padding-top: var(--main-content-pad-top);
+
+  @supports not (contain: content) {
+    // For browsers which don't support the "contain" CSS property,
+    // make a stacking context manually so that the z-index behavior
+    // is consistent. See: https://github.com/nolanlawson/pinafore/issues/1806
+    isolation: isolate;
+  }
 }

 main {