Mac OS X scroll bar causes incorrect cell offsets

[mauricesnip]

First of all, thanks for developing such a fantastic carousel experience. I can't think of a better one!

Though, I've discovered a bug that affects Mac users with a "Show scroll bars" setting other than "When scrolling". Default for this setting is "Automatically based on mouse or trackpad". It took quite a while to figure it all out.

This bug relates to issues #139 and #147, in a way that cell offsets are miscalculated. For example, the second cell gets a left of 100.59% instead of 100%.

This bug happened to me when (hold on to your butts) I connected a mouse other than the Magic Mouse. In my case a Logitech MX518. Mac OS detects this mouse as a touch incapable mouse and decides to show scroll bars for every viewport that needs scrolling. This happens with the option set to its default "Automatically based on mouse or trackpad". The issue remains even after the carousel is repainted to fit vertically (from stacked cells without JS, to a carousel when initialized).

So, as I see it; every Mac user without a Magic Mouse or trackpad (with a third party mouse plugged in) or with "Show scroll bars" set to "Always" has this issue.

Test case: http://codepen.io/mauricesnip/pen/gwxajv

Addendum

Chrome, Firefox and Safari all share this issue.

[desandro]

Another way you can fix this is with CSS

html { overflow-y: scroll; }

This bug only occurs if your page content without Flickity enabled does not trigger a scrollbar.

I may need to add this gotcha to the docs.

[jamesstcrice]

It seems like this is still an open "bug"?

I purchased a license a long time ago, but guess I had never tried flickity on a a page that was too short to trigger scroll, which seemed to be what caused me to notice this.

I added the overflow-y: scroll; - but that causes a disable scrollbar to show even when there is nowhere to scroll which isn't ideal.

Are you aware of any other work-around?

Thanks

[desandro]

I added the overflow-y: scroll; - but that causes a disable scrollbar to show even when there is nowhere to scroll which isn't ideal.

That's the necessary and simplest workaround for this issue.