leafo/sticky-kit

Flickering in Safari

Opened this issue · 10 comments

apaul314 commented

In Safari sticky cannot work with
{ recalc_every: 1 }
option without flickering unlike Chrom / Firefox

skillmatic-co commented

Same here. Anyone have an alternative library for doing this?

sergiofruto commented

I'm having the same issue.
I have a markdown change and I need to use the { recalc_every: 1 } in order to avoid an overlapping. It's working great in Chrome/FF but it flickers a lot in Safari.

sergiofruto commented

@hose314 @tenold I just updated the library to v1.1.2 and now I don't need to use the
{ recalc_every: 1 }.

  • 👍1
dimitrov-adrian commented

Trying with 1.1.2 and latest dev (1.1.3) but flickering does not going out. Any fixes?

jitan16 commented

I'm having the same here. flicker and bouncy in Safari browser.

botaylortravismathew commented

Has anyone solved this issue? I need this to work in safari :-\

mvdve commented

It looks like that there is an issue with elements where the display property is inline or block.

In my case i used a div element. Setting the display property to inline-block solved the flickering issue for me. Works fine in all other browsers.

  • 👍1
value32 commented

seems to me that the parent container must not be positioned absolute but relative. So using the good old float:left and so on did the trick for me...

  • 👍1
ihaettypo commented

I think you guys should read this https://github.com/leafo/sticky-kit/wiki/Troubleshooting, spacer: false solved the problem for me

justinasweb commented

Problem still exists on Safari. Sticky elements are flickering on scroll with recalc_every: 1. Does anyone have a solution? I tried setting the parent to display: inline-block, tried setting parent and spacer selectors with the same structure like here but the problem still exists.