AurelioDeRosa/audero-sticky

containing block overflow is not supported.

ffuubarbuzz opened this issue · 9 comments

ffuubarbuzz commented

If containing block has scroll, polyfill fails.

athyuttamre commented

@AurelioDeRosa any progress on this?

If not, I can try and help. If I understand correctly, what we want to do is:

  • Traverse the DOM tree upwards to find the first parent that has a position set.
  • Update the library to measure all offsets from this parent, rather than from window. Of course, if no parent has a position set, the parent becomes the window.

Anything else? If you'd prefer to try and fix this yourself, please let me know.

athyuttamre commented

An easier implementation might be to ask the user to specify both the element and the parent during init. Which do you prefer?

ffuubarbuzz commented

offsetParent could be used to find closest positioned parent without traversing DOM tree, but I don't believe It has anything to do with overflow scroll. To find scrollable parent one should probably traverse DOM upwards checking if element's overflow, overflow-x or overflow-y is set to auto or scroll.

ffuubarbuzz commented

Or compare parent's scrollHeight with clientHeight or offsetHeight. Reference

athyuttamre commented

You're right!

However, it turns out there's no way to position a child element to stick to the top of an overflowing container. The only way to make it appear so is to make sure the overflowing container doesn't have a position set, but have a grandparent with position: relative or similar. So the parent container scrolls, and the element is fixed to the top of the grandparent.

I also believe the position: sticky spec explicitly disables positioning inside overflowing containers. So if we implement this, it'll definitely be extra behavior.

ffuubarbuzz commented

Can't find where spec disables positioning inside overflowing containers, could you please point me with a link? And Safari, which is the only browser implemented position: sticky so far, supports it within overflowing container: http://codepen.io/ThiRaBrTNK/pen/VjBXpo

athyuttamre commented

@ThiRaBrTNK sorry, I misspoke. I read that any overflow value will disable position: sticky in this README here: https://github.com/filamentgroup/fixed-sticky#native-position-sticky-caveats. Looks like it works in your demo though!

If we can make it work without a grandparent element, I'd be seriously impressed.

AurelioDeRosa commented

Hi @athyuttamre.

Unfortunately because of lack of time I've been unable to address this issue and I'm keen to accept pull requests that fix it. So, feel free to contribute to this project!