search

leafo / sticky-kit

A jQuery plugin for creating smart sticky elements
http://leafo.net/sticky-kit
2.9k stars 517 forks source link

Scrolling stops working in chrome 65 #259

Open milansimek opened 6 years ago

milansimek commented 6 years ago

When using sticky kit with chrome 65, scrolling stops working if you scroll constantly starting at page load.

It seems it blocks requestAnimationFrame and async deferred loading of resources.

milansimek commented 6 years ago

Found a fix using the following CSS:

.is_stuck {
  transform:translate3d(0,0,0);
}

It seems scrolling doesn't work properly in chrome 65 whenever a fixed element is added to the page.

cassius-v commented 6 years ago

Ur solution works fine! Thank You!

ckosidow commented 6 years ago

This solution works for me thanks so much! How did you come to this solution and why does this work?

milansimek commented 6 years ago

It seems that there's a bug in Chrome 65 that messes up scrolling when a fixed element is added to the page. Either scrolling stops or the element won't be added until you stop scrolling.

Adding this CSS will offload the rendering of the element to the GPU, I suppose it makes adding the element non-blocking for the main rendering / JS thread

milansimek commented 6 years ago

It seems they're working on a fix:

https://bugs.chromium.org/p/chromium/issues/detail?id=797708&desc=2#c44

I personally completely ditched sticky kit on our website, and moved to position:sticky in conjunction with the IntersectionObserver API. (had to rewrite a lot of other stuff also by the way)

FYI position:sticky doesn't work in IE11

milansimek commented 6 years ago

Oh yeah, don't forget to cross browser test this solution. The CSS property can cause some rendering issues occasionally

cassius-v commented 6 years ago

Thanks again! I have done other tests with chrome and it works very well. Did you see that in Edge sticky element flickers?

milansimek commented 6 years ago

Yes, I notice that also indeed. You're also using position:sticky in this case or still the sticky kit library?

cassius-v commented 6 years ago

I use sticky kit 1.1.3

milansimek commented 6 years ago

Same issue when using position:sticky.

They call it Edge, but it's just IE with another name.

chenghong commented 6 years ago

Hi, do you mind sharing your position:sticky solution?