Flickering in Safari

[ertdfgcvb]

This is a (multiple allowed):

• 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);

[vltansky]

@moritzebeling @adambichler try cssMode https://swiperjs.com/swiper-api

[mitschmidt]

Confirming this bug using the latest swiper version (6.8.1) on an iPhone 7 with iOS 14. cssMode solves the flickering, but we need the zoom functionality for our app. Will try to find a different solution.

EDIT: I must have messed up the various solutions; After only adding -webkit-transform: translate3d(0, 0, 0); to the .swiper-slide class it works without flickering on the iPhone 7. Thanks to everybody for providing their ideas and solutions, let's hope the root cause can be solved by Safari or the swiperjs team.

[wwwisie]

Confirming this bug using the latest swiper version (6.8.1) on an iPhone 7 with iOS 14. cssMode solves the flickering, but we need the zoom functionality for our app. Will try to find a different solution.

EDIT: I must have messed up the various solutions; After only adding -webkit-transform: translate3d(0, 0, 0); to the .swiper-slide class it works without flickering on the iPhone 7. Thanks to everybody for providing their ideas and solutions, let's hope the root cause can be solved by Safari or the swiperjs team.

This worked for me, even on older versions. I've tested in v4.3.3 and v6.0.4 on the iPhone 8 Plus (14.6)

[AdrianFahrbach]

I was redirected to this issue from #5180 but I don't think that those problems are actually duplicates.

The suggested solutions from this thread don't work for me.
The flickering that I described only happens while sliding and not on the transition end. In addition to that it doesn't flicker on desktop Safari. For further details take a look at #5180

[DanielOberlechner]

Hey I'have the same issue on macos and safari.
I have 3 slides and as effect cube.
When the 3. slide is done, it goes once again to show the 3. one which starts to flicker as hell.
Then the 3. is done the second time it starts at the beginning.

Can confirm that this flickering thing is still a issue.

Anyone any ideas how to fix that problem?
I'm not long into this library simply started fresh and have this issue.

Kind regards,
Daniel Oberlechner

Is it possible, that this issue is because of the effect cube? Or which effect do you guys use?

[stefanovacchi]

@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;
}

another improvement in besides this is to disable followFinger.

[maenamer]

below worked perfectly for me when using Safari. I hope the same should work with you to stop Flickering in Safari .

.swiper-slide { -webkit-transform: translateZ(0); -o-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-backface-visibility:hidden; transform: translateZ(0); } .swiper-wrapper { -webkit-backface-visibility:hidden; -webkit-transform-style: preserve-3d; }

[vltansky]

looks like adding solving the issue

.swiper-slide{
   trasnform: translateZ(0);
}

@nolimits4web what do you think?
we can add some hacks for safari only for example:

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
    /*
      Define here the CSS styles applied only to Safari browsers
      (any version and any device)
     */
}}

https://solvit.io/bcf61b6
https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome

[moritzebeling]

Latest Hardware, latest Version of Safari and Swiper, all the CSS hacks discussed above in place, the flickering remains. When I use the autoplay module, the flickering appears with every slide, otherwise it’s only every nth :(

When I use cssMode, the transitions are not as smooth and the loop interrupts once I have clicked through all images.

Will this ever be fixed? I do see other sliders on the web that don’t have flickering... Is it time to look for another solution?

[wplit]

@moritzebeling

Do you have an example URL where you can still see flickering after adding the translateZ(0); solution on the slides? I'm testing it now across lots of devices and it solves it for me. Interested to see where it fails.

If I apply this to the demos on the swiper site using dev tools it also fixes it for me.

[bikubi]

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).

cssMode: true fixed the flicker for me without the performance penalty of hardware acceleration hacks

Chiming in re: performance penalty, which in my case (75 full-screen slides with jpegs) was so bad that it either crashed the browser (mobile Safari on iPad, iOS 15.1) or, with slide count halved, effectively prevented any animation.
After I removed the hacks everything went back to smooth, the original issue got better, I think (in the meantime I had "solidified" the base layout). cssMode would have worked as well, but introduced a different flicker which I did not attempt to debug.

[wplit]

Just adding some extra info here that I found while troubleshooting.. Not solutions, but gives some insight into the problem.

• Removing the overflow: hidden from the 'swiper' class completely removes the flickering (obviously not useful as we need it to be hidden, but could give a clue to the best solution - eg can we recreate overflow hidden, but avoid using overflow?)
• The flickering is occuring on swiper-wrapper, not the individual slides. (you can test by adding background colours to all the levels, if the slides were flicking you'd see the wrapper when it flickers, but you don't)
• Adding translateZ(0) on the slides solves it, but with a large number of slides causes performance issues because you're creating too many layers for it to handle. The performance is related to how far outside of the viewport the slider actually goes. For eg, 20 full screen slides, you'll see issues because the slider is outside of the viewport 19x the viewport width. But only 4 slides will work fine. likewise if you have 20 slides, but have slidesperview set to 3, it'll be fine as the slider is only about 6x the viewport width.

(Notice that even the 20 slides full width works well on mobile Safari, probably because much less width to the slider due to the smaller viewport width, but on desktop it struggles)

Some tests.. (bright coloured backgrounds are so the flickering would be more visible if it was happening)

20 full screen slides - https://codepen.io/wplit/full/RwjNxxa [struggles]
20 1/3 width slides - https://codepen.io/wplit/full/mdqypjO [works]
4 full screen slides - https://codepen.io/wplit/full/bGYNazL [works]

In all cases the flicker is gone, it's just a case of performance. If we could find a solution to the overflow issue mentioned above, this would prevent the need to put slides on new layers and would remove the performance issue.

[vltansky]

@wplit
Good job with a summary!

https://codepen.io/vltansky/pen/rNYVBJa
take a look, how is it works for you?

[DanielOberlechner]

@vltansky
At my 16 Inch MacBook Pro with Apple M1 Max everything run's fine without any flickering.
This special slide seems to work flawlessly ....

Kind regards,
Daniel

[wplit]

@vitansky

Still seeing performance issue, but I don't think it can be avoided. Obv 20 full screen slides is an extreme scenario, so this solution will solve it for 95-99% of use cases i would have thought.

[vltansky]

Swiper v8 released with new option https://swiperjs.com/swiper-api#param-maxBackfaceHiddenSlides
give it a try

[moritzebeling]

I now have the impression that this reduces the flickering a little bit (only every 3rd-5th instead of every slide):

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

while the following reduces the flickering even more (maybe every 10-20th):

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

[DeltaRays]

I tried using all the suggested changes however nothing fixed it. It works fine on desktop, even with small viewports. I've removed as much other code as possible to see if it was caused by something I'd done but nothing seems to have improved. Dragging the slide to switch to the next one isn't an issue, however when I stop dragging on it (aka stop touching the screen with my finger) it doesn't transition to the next slide, instead it waits some time then replaces the current one with the next one...

[ghost]

One solution is to apply -webkit-transform: translateZ(0); on the hidden slides that are about to become visible (instead of all slides) and removing the property once the animation is done. This fixes the flickering and shouldn't cause performance issues as translateZ(0) is only applied to 1 or 2 slides in most cases.

However, when the user navigates to a faraway slide (e.g. from the last slide back to the first slide) this solution could cause performance issues. In this case, the transition-timing-function should be considered. For example, for transition-timing-function: ease-in-out; you could apply translateZ(0) to the first 2 and the last 2 slides, as these will move the slowest and hence is where the flickering will be most noticeable.