Search code examples
javascripthtmlcsspositionsticky

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?


Solution

  • 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.