Horizontal scrollbar between 1220px and 1234px

[max-ci]

Description

There is a horizontal scrollbar between 1220px and 1234px screen width when you are at the top of the page (it disappears when sidebar on the right becomes fixed)

Expected behavior

No horizontal scrollbar

Actual behavior

Horizontal scrollbar between 1220px and 1234px screen width when you are at the top of the page

Package versions

• MkDocs: 0.16.3
• Material: 1.12.1

System information

• OS: OSX
• Browser: Chrome/Firefox

Possible fix:

body {
  position: relative; // ?
  overflow-x: hidden; // ?
}

[squidfunk]

Hmm, for me it doesn't appear on Chrome or Firefox on OS X for the hosted docs. Did you change any CSS?

[max-ci]

No, the screenshot comes from hosted docs. Strange, I also checked on Chrome/Windows and the same thing. Make sure you are at the top of the page (when right sidebar is not fixed).

Horizontal scrollbar

[squidfunk]

I'm sorry, it's not reproducible for me. Someone else experiencing this? Please provide some more information on this.

[max-ci]

Here is another screenshot (Windows 7/Chrome 61.0.3163.100, browser width: 1225px)

[squidfunk]

Is this http://squidfunk.github.io//mkdocs-material? Do you hve any browser extensions installed?

[max-ci]

Yes, it is http://squidfunk.github.io/mkdocs-material/

And yes, I have some browser extensions, but I checked it also on Firefox without extensions and on Windows in Chrome without extensions in incognito mode.

I also asked my friend to go to the material docs, change browser width to 1225px, be at the top of the page and tell me if you see horizontal scrollbar, the answer was yes ;)

[mtik00]

Here's a screen grab on Windows 10 with Chrome Version 61.0.3163.100 (Official Build) (64-bit). Same thing @makshh is seeing. I've disabled the only browser extension that was installed (UBlock Origin).

edit: Same thing is happening with Microsoft Edge 41.16299.15.0.

[squidfunk]

I can finally reproduce it on Windows, but not on OS X. Very strange. Will look into that.

[squidfunk]

So the problem is exactly this:
http://www.456bereastreet.com/archive/201301/media_query_width_and_vertical_scrollbars/

[squidfunk]

TL;DR: fixed in #559, however TOC position not 100% correct

The horizontal scrollbar should be fixed with #559, but this is really only a partial fix. The position of the right sidebar is not correct, which is because some browsers consider media query width to be the browser window width including the scrollbars, but the browser considers the browser window width without scrollbars when rendering the CSS. The breakpoint breaks to use margin-left: 122rem when the window is not really ready and cannot contain the element. All other alignment is not possible due to the fact what parent element can be set to overflow and which can be position relative. This is a really complicated issue. A possible solution could be to fix it with JavaScript, which is pretty ugly, but it's the easiest way.