Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prevent horizontal jump as scrollbars appear #1230

Merged
merged 1 commit into from
Mar 4, 2019
Merged

Prevent horizontal jump as scrollbars appear #1230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 6 additions & 0 deletions src/core/_template.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down