diff --git a/scss/global.scss b/scss/global.scss index 5c1c8783..31879ff0 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -29,13 +29,24 @@ body { line-height: 1.4; color: var(--body-text-color); background: var(--body-bg); - -webkit-tap-highlight-color: transparent; /* fix for blue background on spoiler tap on Chrome for Android */ + -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android + @supports not (-webkit-overflow-scrolling: touch) { + // Prevent horizontal scrolling on mobile Firefox on small screens. See below for why we're + // using a @supports here to target non-iOS browsers. + overflow-x: hidden; + } } .main-content { - // these margins should be kept in sync with getMainTopMargin.js + @supports (-webkit-overflow-scrolling: touch) { + // iOS Safari ignores overflow-x:hidden on body, so we add it again here. Unfortunately, this breaks the display + // of the position:sticky button in Chrome, so we wrap it in a @supports query that only targets iOS + // See https://stackoverflow.com/a/14271049 + overflow-x: hidden; + } + contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content + // these paddings should be kept in sync with getMainTopMargin.js padding-top: 42px; - contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */ @media (max-width: 991px) { padding-top: 52px; } diff --git a/templates/2xx.html b/templates/2xx.html index 9e63b660..1ff0d740 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -17,7 +17,7 @@