search

metafizzy / flickity

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

Using Web Components seems to break carousels on mobile. #1241

Closed ConduciveMammal closed 2 years ago

ConduciveMammal commented 2 years ago

I've created two carousels using web components, the main carousel and the carousel navigation.

Both work perfectly on desktop, however on iOS and Android, the navigation breaks and is unusable. I noticed that the transform property on the slides aren't being applied.

Seems to work perfectly on desktop.

Try this link on mobile and you'll see the thumbnail slides are all smashed together and unusable. Test case: https://codesandbox.io/s/intelligent-brook-hmho59

Responsive view via a desktop

CleanShot 2022-07-28 at 5 36 58@2x

View from mobile device image

ConduciveMammal commented 2 years ago

Ignore. Turns out custom elements don't come with default browser styles (duhh) and so I simply needed to add display: block to the main carousel element.