Content on pages move horizontally depending on if a scrollbar is on screen or not

edwardhorsford commented 5 years ago

Content in the template is centred on the page. If the page has a scrollbar, this will be slightly to the left. If the page doesn't have a scrollbar, the content is slightly to the right.

If a user moves between tabs / sections of the site, this makes the GOV.UK logo and other things appear to jump about. Ideally when using navigation links, everything would stay in position.

Example: govuk-template-scrollbar-or-not

On my personal site I've gotten around this by using margin-left: calc(100vw - 100%); on body - which adds a left margin equal to the width of a scrollbar.

@nickcolley tells me that @colinrotherham also raised this recently and suggested this:

@media only screen {
  .container {
    overflow-y: scroll;
  }
}

NickColley commented 5 years ago

In GOV.UK Template (which we aim to replace) it has something to account for this:

36degrees commented 5 years ago

Fixed in #1230

alphagov / govuk-frontend

Content on pages move horizontally depending on if a scrollbar is on screen or not #1204