Dragging issue (iOS Safari - iPhone 13 Pro)

[markoKodric]

Hello,

I noticed that there seems to be an issue on iOS Safari - iPhone 13 Pro.
It looks like slides are flickering/rerendering while dragging.

Below is screen recording of the behaviour:
https://user-images.githubusercontent.com/18535475/136949371-e80862e9-baa0-4316-b04a-a41ed9480f04.mp4

These are my slider settings:
{ arrows: false, pagination: false, autoplay: true, interval: 5000, breakpoints: { 767: { pagination: true } } }

Any ideas about why this is happening or how to fix this behaviour?

[markoKodric]

Edit:

I got rid of the weird image-drag/rerendering effect issue by applying "translateZ(0px)" to "splide__list" element (I had to overwrite the JS source file to include translateZ property alongside translateX property).

Line 1420 in splide.js file changed from:
list.style.transform = "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)";
to:
list.style.transform = "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px) translateZ(0px)";

Works fine now if you scroll forward.

But the flickering remains on the scroll to the previous slide. So the question is still active.

[NaotoshiFujita]

Looks different from the default sliding transition. What's happening at this moment?

[markoKodric]

In that moment I was slowly dragging horizontally across screen. That part got resolved with translateZ(0) atrribute.

Issue remains with slide flickering (quickly shifting left/right), but I found out that it happens only if you are at top of page. Maybe it has something to do with iOS safari's elastic scrolling (that bounce on top and bottom of page on scroll).

[NaotoshiFujita]

But why the next slide overwraps the previous one instead of pushing it?

[markoKodric]

Not sure, it's a very strange behaviour 🙂 happened only in safari though, tried it on chrome and it worked fine.

[NaotoshiFujita]

Safari has a problem with transform + transition + (z-index).
https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
backface-visibility can sometimes solve it.

[markoKodric]

I tried it and it works better now. Still some flickering here and there. Perhaps i will just disable the dragging on this slider and use arrows for navigation. It's just annoying 🙂