Merge pull request #1230 from colinrotherham/horizontal-scroll

Prevent horizontal jump as scrollbars appear
alphagov · Mar 4, 2019 · ab71282 · ab71282
2 parents 4e423aa + cc22ea4
commit ab71282
Show file tree

Hide file tree

Showing 2 changed files with 16 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,12 @@
     // 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 in IE, to prevent horizontal page
+    // jumps as content height changes (e.g. autocomplete results open).
+    @include govuk-media-query($media-type: screen) {
+      overflow-y: scroll;
+    }
   }
 
   // Applied to the <body> element