Slick: Page flickering on slide transition in Safari (Mac Only)

[pixelkittenx]

I've noticed an that when the slides transition, it's causing other items on the page to flicker. This is only happening on Safari (Mac).

Fiddle: https://jsfiddle.net/d55mdzut/4/

I haven't been able to replicate the issue exactly in a fiddle. On the actual site, the text and all content below the slider is flickering. In the fiddle, I did notice that the image does flicker in Safari (Mac) but not on any other platform, so this I think it's the same problem.

I believe the issue came up when I updated from 1.3.3 to 1.4.1 since my client never brought it up before, but I'm still waiting on confirmation for that.

[simeydotme]

flickering can happen due to composited layers getting re-rendered, have a look at some of your flickering elements and see if they have opacity, transform or z-indexset on them or their parents - a usual culprit is absolutely positioned elemtents. I don't really know how to fix your individual issue, but you should look here first, try changing some css values for the elements (or parents) which are flickering :)

[wesdekoninck]

I am having the same issue with a slider I just put on a client website. When the slider transactions (slides), several text elements on the page flicker. This is only occurring in Safari on Mac. Anyone else seeing this or find a solution yet?

[tomaszpoliszuk]

This bug is not slick.js related - it's browser-engine related.
You should try things like:
-webkit-backface-visibility:hidden;
position:(non-static);
z-index
transform

For example las time i have bug like this z-index:10; for entire slider did fix it.

[pixelkittenx]

Adding this -webkit-transform:translateZ(0) to the flickering elements fixed my issues. Interestingly, -webkit-backface-visibility:hidden; fixed the issue for one section on the page, but wouldn't fix it for another.