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.

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

Horizontal scrollbar between 1220px and 1234px #542

Closed
max-ci opened this Issue Oct 26, 2017 · 10 comments

Comments

Projects
None yet
3 participants
@max-ci
Copy link

max-ci commented Oct 26, 2017

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

This comment has been minimized.

Copy link
Owner

squidfunk commented Oct 27, 2017

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

This comment has been minimized.

Copy link

max-ci commented Oct 27, 2017

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

This comment has been minimized.

Copy link
Owner

squidfunk commented Oct 28, 2017

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

@max-ci

This comment has been minimized.

Copy link

max-ci commented Oct 28, 2017

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

123124

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Oct 28, 2017

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

@max-ci

This comment has been minimized.

Copy link

max-ci commented Oct 29, 2017

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

This comment has been minimized.

Copy link

mtik00 commented Oct 29, 2017

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).

horizontal-bar

edit: Same thing is happening with Microsoft Edge 41.16299.15.0.

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Oct 30, 2017

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

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Nov 1, 2017

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Nov 1, 2017

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.

@squidfunk squidfunk self-assigned this Nov 1, 2017

@squidfunk squidfunk closed this Nov 1, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment