Carousel not working on iphone/max/ios (WebKit engine)

[noooooooooooooooooooooa]

Prerequisite

Before you submit a feature request or report a bug to be fixed, make sure you have stared this repository. A donation is also welcomed

Describe the bug Carousel is buggy on iphone/max/ios (WebKit engine).

To Reproduce Steps to reproduce the behavior:

1. Use that code

   <Carousel
                       additionalTransfrom={0}
                       arrows
                       autoPlaySpeed={3000}
                       centerMode={false}
                       containerClass="container-with-dots"
                       draggable
                       focusOnSelect={false}
                       infinite
                       keyBoardControl
                       minimumTouchDrag={80}
                       pauseOnHover
                       renderArrowsWhenDisabled={false}
                       renderButtonGroupOutside={false}
                       renderDotsOutside={false}
                       ssr={true}
                       responsive={{
                           desktop: {
                               breakpoint: {
                                   max: 3000,
                                   min: 1350
                               },
                               items: 4,
                               partialVisibilityGutter: 40
                           },
                           laptop: {
                               breakpoint: {
                                   max: 1350,
                                   min: 1024
                               },
                               items: 3,
                               partialVisibilityGutter: 40
                           },
                           tablet: {
                               breakpoint: {
                                   max: 1024,
                                   min: 464
                               },
                               items: 2,
                               partialVisibilityGutter: 30
                           },
                           mobile: {
                               breakpoint: {
                                   max: 464,
                                   min: 0
                               },
                               items: 1,
                               partialVisibilityGutter: 30
                           },
                       }}
                       rewind={false}
                       rewindWithAnimation={false}
                       rtl={false}
                       shouldResetAutoplay
                       showDots={false}
                       slidesToSlide={1}
                       swipeable
                   >
                       {imageCards.map((image, index) => (
                           <div className="group" key={index + "x4"}>
                               <img
                                   draggable={false}
                                   src={image}
                                   className={`rounded-3xl cursor-pointer absolute top-0 left-0 transition-opacity duration-1000 opacity-0`}
                               />
                               <img
                                   draggable={false}
                                   src={image}
                                   className={`rounded-3xl cursor-pointer h-full object-contain transform transition-all duration-300 group-hover:scale-90 border-8 border-transparent`}
                               />
                           </div>
                       ))}
                   </Carousel>

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Additional context Only on Webkit.

Reproduction my site is private