diff --git a/CHANGELOG.md b/CHANGELOG.md index a5a3397a7b..fd9b51c5a4 100644 --- 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 index 88f91ef2e6..842b092b78 100644 --- 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 element