`position: sticky` causes sidebar overlap in Chrome #752

Open
kvz opened this Issue Jan 5, 2017 · 6 comments

Projects

None yet

2 participants

@kvz
kvz commented Jan 5, 2017

Hi, thanks for minimal-mistakes! I just deployed it yesterday on kvz.io and loving it so far. One person on reddit reported it looked weird - but it looks fine in my browsers.

The page in question is http://kvz.io/blog/2017/01/04/introducing-lanyon/ - Beyond social buttons, i did not make any layout changes, only config & markdown.

For convenience here is a direct screenshot for Chrome 56 on windows: http://i.imgur.com/BxfzHrn.png

@mmistakes
Owner

Does the overlap happen on all pages that have the author sidebar? or just that one?

I'm on Chrome 55 on Windows and not able to reproduce it. Are there any sort of JavaScript errors in the console or is it disabled for any reason? There is a JS polyfill for position: sticky used on the sidebar that could be potentially running amok.

Other than that I'm at a loss as to what's going on.

@mmistakes
Owner

OK, looks like it's related to position: sticky since it was added to the beta version last month. Will have to test it out and hopefully get a fix out before position: sticky support hits the stable release of Chrome... whenever that is.

@mmistakes mmistakes changed the title from Chrome 56 appears to render minimal-mistakes with overlaps to `position: sticky` causes sidebar overlap in Chrome Jan 5, 2017
@mmistakes
Owner

Tested on beta Chrome 56 on Windows and all works as it should.

chrome_56

lanyon-grab

With position: sticky landing in Chrome stable soon seems like a good time to drop the polyfill. Wasn't adding much anyways and likely won't be missed in older browsers or IE that don't currently support it.

Still not sure why it's broken for that redditor, could be something JS related. I know there's stuff in the theme that was added awhile back that tests the width of things to trigger the sticky polyfill, and that could be borked for whatever reason.

@mmistakes mmistakes self-assigned this Jan 5, 2017
@mmistakes mmistakes added a commit that referenced this issue Jan 5, 2017
@mmistakes Remove `position: sticky` JavaScript polyfill
- Fallback to default positioning for browser that don't support it IE, Chrome < 56, etc.
- Issue #752
55843c5
@kvz
kvz commented Jan 5, 2017

Blown away by your care and thoroughness in handling this issue! Humbling! ❤️

@mmistakes
Owner

I do what I can 😉

In the end I took out the polyfill. In Firefox, Safari, and Chrome 56 the sidebar will "stick" as it should. On older browsers it scrolls with the rest of the page, which isn't so bad either.

If you're interested in making the changing it's pretty small and in this commit. I'll roll it out officially in the next release.

@mmistakes
Owner
mmistakes commented Jan 5, 2017 edited

You need to test on bigger screen sizes. The bug only appears when the browser is over 1150px wide and then it jumps back to working again for a little bit until the browser gets to be over 1400px wide. It appears from the GIF you posted that you didn't test on anything wider than maybe 1000px.

@NathanHeffley Definitely not the case. It may be hard to tell from the GIF but the screen was much wider than 100px.

Tested on both Windows and Mac Chrome 56 (beta) and couldn't reproduce the overlap.

screen shot 2017-01-05 at 1 39 31 pm

Screen width 1875px:

screen shot 2017-01-05 at 1 39 48 pm

Curious to know if you have any plugins installed that might mess with JS or noticed any script errors in the console.

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