Scrolling stops working in chrome 65

[milansimek]

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]

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]

Ur solution works fine! Thank You!

[ckosidow]

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

[milansimek]

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]

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]

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

[cassius-v]

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

[milansimek]

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

[cassius-v]

I use sticky kit 1.1.3

[milansimek]

Same issue when using position:sticky.

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

[chenghong]

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