search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Mac OS X scroll bar causes incorrect cell offsets #466

Closed mauricesnip closed 6 years ago

mauricesnip commented 8 years ago

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.

screen shot 2016-09-29 at 13 15 30

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 commented 8 years ago

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 commented 6 years ago

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 commented 6 years ago

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.