Swiper: Flickering in Safari

[ertdfgcvb]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: Swiper 5.3.6
• Platform/Target and Browser Versions: macOS 10.14.6, Safari 13.1

What you did

In safari there is a brief flicker when the swipe animation ends. This can result in a very annoying experience. I noticed that there was a similar issue (#3124) flagged as "outdated".
It seems hardware related.

Workaround

Added -webkit-transform: translate3d(0, 0, 0); to the .swiper-slide class as suggested here.
The -webkit prefix guarantees that the fix is effective only on Safari.
Strangely it seems that the added 3d transform on this class _disables_ the hardware acceleration as the transition appears less smooth (might be an impression).

[nortonandreev]

Have fixed it by adding:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

However, yes, I think it would be good if it gets fixed.

[ertdfgcvb]

I captured the scroll from one frame to the other with a screen recorder the moment the transition is ending.
In the second image the 'flickering' area is visible… It's just about one frame long.
This seems related to a Safari issue dealing with the hardware renderer… so it seems that the only option is to trigger software rendering with the CSS fixes mentioned above.

[tiadaguru]

This bug is reproducible on _every Swiper installation_, including the latest Swiper 5.3.7, on iOS Safari 13.4.1, _even reproducing_ on swiperjs.com.

• A short screen recording of the bug on Swiperjs.com on April 19, 2020
• Test device: iPhone 6S Plus, iOS 13.4.1

It's been mentioned both in that recent issue and I believe this StackOverflow post, too. I spent 45 minutes tracking down this bug. :( Thank you for offering a workaround, but either the root cause fix or this workaround should ideally be pushed to a public release. I can't imagine we are the only ones who've noticed this.

[tiadaguru]

After some testing, this workaround (-webkit-transform: translateZ(0)) tanks swiping performance, as expected (I'd wager the performance degradation is more noticeable as you move beyond simple sliders). The default 3dtranslate offers smooth stutter-free transitions, but with flickering.

Alas.

[tiadaguru]

I took the video frame by frame. It seems like, when it flickers once on a certain slide, it will flicker _again_ exactly at that slide location.

The flicker = a portion of the slide is sliced off, revealing the element _behind_ swiper_container.

Some examples

Format of Seconds.FrameNumber. Thus, at 7.02 , 9.07, 12.03, and 13.11, Swiper.js has sliced off the _same_ slide at the _same_ location, i.e,. the orange sunset around halfway through its reflection. Four times, same slice: sometimes, Swiper.js keeps the left and sometimes, Swiper.js keeps the right.

7.02 / 9.07 / 12.03 / 13.11 set

7 sec, 02 frame (see the slice location)

12 sec, 03 frame (same as above!)

9 sec, 7 frame (again, same)

13 sec, 11 frame (again, same)

21.21 / 29.04 / 30.04 / 31.04 set

21 sec, 21 frame

29 sec, 04 frame

30 sec, 04 frame

31 sec, 04 frame

There are more examples, but this post is probably illustrative enough.

[tiadaguru]

I can confirm the bug remains in the latest 5.3.8 update released today and still reproduces perfectly on swiperjs.com. Tomorrow, I'll see what Safari's debugging can share.

I may have misunderstood the hardware inclination, but I don't think this is hardware-specific. I can reproduce it reliably in iOS 13.4.1 (iPhone 6S Plus), while @ertdfgcvb can reproduce it on macOS 10.14.6 (presumably a laptop/desktop).

[ertdfgcvb]

I think this is not a swiper issue: I'm able to reproduce this flickering on Safari (mobile and desktop) just with simple horizontal scrolling (meanwhile I wrote my own "swiper", partly to see if I was able to overcome this issue)…
I guess it has to do with the hardware accelerated rendering; the only way to avoid it is with the CSS triggers/hacks above; but this will kill the fps for a smooth transition.
The fact that it appears in the same spot is probably related to the texture sizes the browser uses to render the page (this is speculation, of course).
In any case: just try to build a very long horizontal page and scroll along… you'll notice the same flickering.

[tiadaguru]

Interesting. On every horizontal scrolling site on my iOS device, there are _zero_ flickers.

A few horizontal scrolling test sites; to confirm, you're seeing flicker on _all_ of these?

1. Sway (using their swiping JS library): https://sway.office.com/howtosway (hit Settings to switch to horizontal mode)
2. CSS Tricks CSS Horizontal Scrolling Demo: https://css-tricks.com/pure-css-horizontal-scrolling/ (scroll down to the Codepen demo)
3. Webflow Horizontal Scrolling Template Demo: http://horizontal-scrolling-sticky-section.webflow.io/ (not great UI, but still another system)

I saw no flicker on the above sites whatsoever. SwiperJS remains flickery: I can even trigger it on the blank slide demos, though it's much worse on image-based slides.

[roman-rr]

Related issue on webkit community
https://bugs.webkit.org/show_bug.cgi?id=212130

Note: seems issue partially gone with disabled Web Animations API

[vercordio]

cssMode: true fixed the flicker for me without the performance penalty of hardware acceleration hacks (translate3d, backface-visibility) but of course it reduces Swiper functionality considerably.

Likely only appropriate for simpler Swiper implementations.

[ieozt38]

cssMode: true fixed the flicker for me without the performance penalty of hardware acceleration hacks (translate3d, backface-visibility) but of course it reduces Swiper functionality considerably.

Likely only appropriate for simpler Swiper implementations.

where to put cssMode:true ??

[vercordio]

where to put cssMode:true ??

@ieozt38 add this as a parameter, like this:

var mySwiper = new Swiper('.swiper-container', { cssMode: true });

More info in the docs, under "CSS Scroll Snap".

[ieozt38]

where to put cssMode:true ??

@ieozt38 add this as a parameter, like this:

var mySwiper = new Swiper('.swiper-container', { cssMode: true });

More info in the docs, under "CSS Scroll Snap".

Thank you very much but sadly the behaviour changes too much with that property :(

[tiadaguru]

I've done some limited testing and this issue looks to be fixed for me on Swiper 6.1.3 and iOS 13.6.1. I'm using an iPhone 6s Plus on the default Safari browser.

I can no longer reproduce it on https://swiperjs.com/demos/ nor on my own internal sites. I can swipe slowly, quickly, etc.: no flicker, no blackouts, no jittery splicing. Looks as smooth as can be and is a far more reliable & consistent experience.

Notably, I am _not_ using CSS mode: just the default JS-based animations.

[ieozt38]

I've done some limited testing and this issue looks to be fixed for me on Swiper 6.1.3 and iOS 13.6.1. I'm using an iPhone 6s Plus on the default Safari browser.

I can no longer reproduce it on https://swiperjs.com/demos/ nor on my own internal sites. I can swipe slowly, quickly, etc.: no flicker, no blackouts, no jittery splicing. Looks as smooth as can be and is a far more reliable & consistent experience.

Notably, I am _not_ using CSS mode: just the default JS-based animations.

I can confirm that with the swiper 6.1.2 release the bug has been (fixed) tested devices ->
Iphone 6s IOS12
Iphone 11 pro IOS14

[nortonandreev]

I've done some limited testing and this issue looks to be fixed for me on Swiper 6.1.3 and iOS 13.6.1. I'm using an iPhone 6s Plus on the default Safari browser.

I can no longer reproduce it on https://swiperjs.com/demos/ nor on my own internal sites. I can swipe slowly, quickly, etc.: no flicker, no blackouts, no jittery splicing. Looks as smooth as can be and is a far more reliable & consistent experience.

Notably, I am _not_ using CSS mode: just the default JS-based animations.

I'm not seeing the issue in iOS 14, however, it is still present in Safari in macOS Big Sur, although I could argue it's happening less often than before.

[Guyr989]

My GOD! it's working!!!

[91DarioDev]

I started using swiper a couple of days ago and I noticed the bug very soon.

I'm on swiper 6.3.4 and iOS 14.0.1 and iPhone XS

[anthonyhenson]

I use Swiper from CDN. I experience the image flicker when panning a zoomed image on iOS and Android web browsers (for Android, this happened much less on the Chrome browser than the default Samsung browser). Looks to me like it's doing a re-draw every time you pan the image. Maybe more of an issue with high res images?

[NeonilaIvanova]

it is still present in Safari in macOS Big Sur

I also encountered this issue on Safari macOS Big Sur.

Added -webkit-transform: translate3d(0, 0, 0); to the .swiper-slide

this one helped

[moritzebeling]

I experience the problem consistently over the last years, with every new version of macOS, Safari, Swiper.
-webkit-transform: translate3d(0, 0, 0); helps a little bit, but doesn’t solve it completely...

[vltansky]

3641 may be related.

Can somebody confirm that @zhengsusu2014 solution works?

.swiper-slide{
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}

.swiper-wrapper{
-webkit-transform-style: preserve-3d;
}

[vltansky]

@tiadaguru @ieozt38 @Guyr989 I see that it was working properly for you in 6.1.2 release according to your messages.
Although some users here said that the bug still persists, could you please take a look if it still reproduces for you in the latest version?
Unfortunately, I don't have iPhone / mac :)

[MentalGear]

Same issue on macOS Safari 14. Seems to be fixed by:

Have fixed it by adding:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

However, yes, I think it would be good if it gets fixed.

[Yankai17148]

same flicker problem on desktop Chrome 87.0.4280, maybe #3641 can fix this problem.