Prevent horizontal jump as scrollbars appear

alphagov · Mar 1, 2019 · ba2aa4a · ba2aa4a
1 parent 4e423aa
commit ba2aa4a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,16 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Prevent horizontal jump as scrollbars appear
+
+  As content vertical height grows (e.g. autocomplete results appear), browsers
+  may add scroll bars causing the page to jump horizontally in position.
+
+  To avoid this, re-introduce fix from GOV.UK Template:
+  https://github.com/alphagov/govuk-frontend/issues/1204
+
+  ([PR #1230](https://github.com/alphagov/govuk-frontend/pull/1230))
+
 - Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)
 
   On newer devices with "camera notches", browsers reserve a safe area in landscape orientation (known as pillarboxing) so content isn't obscured.

diff --git a/src/core/_template.scss b/src/core/_template.scss
@@ -11,6 +11,15 @@
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
     text-size-adjust: 100%;
+
+    // Force the scrollbar to always display, to prevent horizontal page jumps
+    // as content height changes (e.g. autocomplete results open). Screen only.
+    @include govuk-media-query($media-type: screen) {
+      overflow-y: scroll;
+
+      // Force IE10-11 scroll bar in "tablet" mode
+      -ms-overflow-style: scrollbar;
+    }
   }
 
   // Applied to the <body> element