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