position: sticky causes sidebar overlap in Chrome

[kvz]

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]

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]

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]

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

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.

[kvz]

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

[mmistakes]

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]

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 width 1875px:

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

[mmistakes]

Fixed in https://github.com/mmistakes/minimal-mistakes/releases/tag/4.2.0

[kvz]

Getting

Could not find gem 'minimal-mistakes-jekyll (= 4.2.0)'

I should probably wait a while before it hits rubygems, sharing just in case

[mmistakes]

@kvz Stange. It should be there, along with 4.2.1. Unless it hasn't fully propagated... https://rubygems.org/gems/minimal-mistakes-jekyll/versions/4.2.1