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?

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?

• javascript
• html
• css
• position
• sticky

Share Improve this question Follow asked Mar 19, 2018 at 8:41 Irgend Son HanselIrgend Son Hansel 8111111 silver badges2121 bronze badges 6

• 4 Show minimal reproducible example code that demonstrates the issue. – JJJ Commented Mar 19, 2018 at 8:44
• Please share some of your code. – Yvo Linssen Commented Mar 19, 2018 at 8:44
• I'm experiencing a similar bug. It works fine on Chrome PC but not so much on Chrome Mac (sometime it's hoverable/clickable, sometime its not and click pass through). – nox Commented Apr 3, 2018 at 17:46
• Unfortunately this probably isn't a great question for stackoverflow. It should probably be filed as a bug here: crbug./wizard (and you should check out the instructions here: chromium/for-testers/bug-reporting-guidelines first). That said, I'm also experiencing this bug. Unfortunately it's within a pretty plex application, but I will be taking a swing and creating a simple repro and reporting the bug. – Paul Wheeler Commented Apr 4, 2018 at 18:52
• 1 Actually it looks like it has been reported: bugs.chromium/p/chromium/issues/detail?id=827224 – Paul Wheeler Commented Apr 4, 2018 at 19:01

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

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

https://bugs.chromium/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/p/chromium/issues/detail?id=834054

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.