CODEWITHSUNDEEP
javascripthtmlcsspositionsticky
Irgend Son Hansel
Irgend Son Hansel

Reputation: 751

Bug in google chrome with position sticky?

as a webdeveloper I really love developing on chrome. Now I noticed a bug with position: sticky on Google Chrome Browser. Elements that a positioned sticky wont behave correctly, means: everything seems to be good, until you hover an sticky positioned element, it wont react on interactions etc. (also JavaScript-Functions won't fire on click)

I tested it also on Mozillas Firefox, there it's working as it should.

It's position (of the related element) is sticky but it's behavor is buggy!

Is there any fix for that problem?

Upvotes: 3

Views: 6317

Answers (2)

Irgend Son Hansel
Irgend Son Hansel

Reputation: 751

Now position sticky in flex containers is working in Chrome, and there could be a solution if it does not work in your case:

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

Upvotes: 0

Paul Wheeler
Paul Wheeler

Reputation: 20160

In case anybody is curious, this is probably a bug in chrome:

https://bugs.chromium.org/p/chromium/issues/detail?id=827224

That one was fixed as of Chrome 68, (not yet released as of 4/17/2018), however, there is another bug that is still open if the container of the sticky element has padding:

https://bugs.chromium.org/p/chromium/issues/detail?id=834054

Upvotes: 4

Related Questions