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-zz]

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.

[Franz-Kafka]

I have still the problem with flickering slides in Safari. As in the video…  The CSS-workarounds did not work for me. So there is no solution for this issue?

[WesWedding]

Not a universal one, no. It seems likely that any existing solutions suggested so far will only fix specific types of situations and that unique use-cases and browser combinations won't be addressed by a single solution. Try to experiment with applying the tricks to different parts of your DOM and see what happens.

[tiadaguru]

@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 :)

My apologies for the long delay. Unfortunately, I no longer have the iPhone 6S Plus.

I've re-tested on an iPhone 12 Pro on iOS 14.6 in Safari, with the swiperjs.com/demos build (Thumbs Gallery again; I presume 6.6.2) and the bug does not reproduce there.

Would anyone with an iPhone 6S be able to check?

[moritzebeling]

@vltansky I can confirm that it improves the flickering situation. But wouldn’t say that it solves it completely. Without, I have the flickering with every slide, using this hack maybe only every 5th or 10th slide.

.swipe-slide {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}
.swiper-wrapper {
 -webkit-transform-style: preserve-3d;
}

[adambichler]

As of today, the problem was still present in version 6.7.1. For me, adding this to the .swiper-slide helped for me

-webkit-transform: translate3d(0, 0, 0);