3

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?

6
  • 4
    Show minimal reproducible example code that demonstrates the issue.
    – JJJ
    Mar 19, 2018 at 8:44
  • Please share some of your code. 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
    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.com/wizard (and you should check out the instructions here: chromium.org/for-testers/bug-reporting-guidelines first). That said, I'm also experiencing this bug. Unfortunately it's within a pretty complex application, but I will be taking a swing and creating a simple repro and reporting the bug. Apr 4, 2018 at 18:52
  • 1
    Actually it looks like it has been reported: bugs.chromium.org/p/chromium/issues/detail?id=827224 Apr 4, 2018 at 19:01
4

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

3
  • 1
    Still a problem in Chrome 69 (and Opera 56) for anyone else that stumbles onto this 😕 Note: My container has padding and the element is a select field so could be #834054.
    – Mavelo
    Oct 3, 2018 at 2:53
  • If you're struggling with making sticky divs behavior correct in older versions of chrome/chromium (pre-68), there is a bizarre workaround: setting the sticky div's contentEditable to true and then back to false. jsfiddle.net/w40bnLt5/2 Oct 4, 2018 at 22:39
  • but as far as I know the only way to work around 834054 is to avoid padding on your container Oct 4, 2018 at 22:40
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.