flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Published 20 hours ago • verified publisher icon themesberg

`Carousel` scroll snap does not change slides on Firefox

Open tulup-conner opened this issue 2 years ago • 8 comments

Describe the bug On Firefox, dragging a Carousel left or right does not "snap" the Carousel to the next (dragging left) or previous (dragging right) slide. Instead, you partially scroll however far you dragged.

To Reproduce Steps to reproduce the behavior:

  1. Create a Carousel with at least two images
  2. Attempt to drag horizontally to change slides on Firefox

Expected behavior Carousels should "snap" when dragged to ease user experience, which is implemented correctly in Chromium-based browsers.

Screenshots Screenshot 2022-05-12 at 08-43-26 Webpack App

Desktop (please complete the following information):

  • OS: Linux
  • Browser Firefox
  • Version 100

Smartphone (please complete the following information): n/a

Additional context n/a

tulup-conner avatar May 12 '22 08:05 tulup-conner

I've also noticed that Carousels move vertically when you drag on mobile, if your drag isn't perfectly horizontal, which is a weird user experience. Movement in the Y plane should be ignored.

tulup-conner avatar May 12 '22 08:05 tulup-conner

I also encountered a similar bug on Safari. Cannot use the control buttons, but dragging to left and right worked. Using next.js as my web framework.

Edit: Should I create a new issue for this?

julianYaman avatar May 23 '22 07:05 julianYaman

@julianYaman I guess that we can keep in the same one. I don't have Safari to test it, so... probably someone else will have to test it.

rluders avatar May 23 '22 07:05 rluders

@rluders Alright. Also noticed that the slideInterval didn't work as well. Only dragging atm.

julianYaman avatar May 23 '22 07:05 julianYaman

Ill test that and update this

tulup-conner avatar May 23 '22 08:05 tulup-conner

Controls, indicators and interval are all working just fine for me on Safari for iOS/macOS. Are you on an older version of the library by chance? @julianYaman You can also test a live version of the latest updates at https://flowbite-react.com

tulup-conner avatar May 24 '22 09:05 tulup-conner

@tulup-conner Carousel isn't working there. On Chrome (on macOS), they do work. Looks like an Safari-related problem.

julianYaman avatar May 24 '22 19:05 julianYaman

Hmm... For me, macOS Safari only has one bug, which is that transitions are instant. I can operate the carousels using any of the controls, including scroll snapping.

tulup-conner avatar May 24 '22 20:05 tulup-conner

Thank you for reporting this issue. However, we regret to inform you that we won't be able to address it for the following reasons:

  • The reported issue refers to an unsupported old version of our project.
  • Our team was unable to reproduce the problem with the information provided.
  • Insufficient information was provided to conduct a thorough investigation.

We recommend upgrading to the latest version and submitting a new issue if the problem persists. Thank you for your understanding.

rluders avatar Jul 25 '23 19:07 rluders