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.
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.
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
View from mobile device![image](https://user-images.githubusercontent.com/18140157/181591720-70299dbe-9624-44f2-8b8d-92a6a15756e3.png)