Carousel doesn't work correctly in safari (MacOS)

[NashAtFramework]

Describe the bug
Carousel doesn't operate correctly when using desktop safari. It will move only a few pixels as you attempt to navigate through items

To Reproduce
Literally check the website on desktop safari https://flowbite-react.com/carousel

Expected behavior
Each event moves the entire card content fully

Screenshots
https://user-images.githubusercontent.com/94366107/196922775-6a4ee4a9-e5d2-4d92-80df-d6357fa14be9.mov

System information:

• Device: MacBook Pro 14
• Resolution:
• OS: Macos
• Browser: Safari
• Version: 16.0 (17614.1.25.9.10, 17614)

Project information:
N/A as its happening on the website

[code-z2]

i have similar issue with nextjs13, i'm using brave browser and non of the carousel images or elements are displayed.

[JDaniel41]

I have the same issue happening on my website as well. Only is an issue in Safari.

[andrewpltnv]

There may be an issue with scroll-behavior: smooth in Safari. The property scroll-smooth is set on Carousel by default, you can check that via dev-tools.

Try wrapping your Carousel with the <Flowbite /> component.

It accepts a theme object as a prop and can be used to overwrite Flowbite default styles.

In such case may work out this approach:

<Flowbite 
   theme={{ 
     theme: { 
       carousel: { 
         scrollContainer: { 
           base: 'flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-auto rounded-lg',
           ...
         }, ...
       }, ...
     }, 
   }}> 
  {/* Your Carousel component*/} 
</Flowbite>

All default styles of Flowbite components you can find here.

Also, it may be useful to check out this pull request.

[rluders]

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.