Regarding the question of using
I’ve opted to use it, with a fallback of
position: static for Internet Explorer. It seems all other modern browsers support it. To find the best solution I had to try quite a few. There were many unexpected behaviours that I’ll summarize below.
position:static might be a surprising fallback for
sticky. The reason for that choice is that
position: absolute and
fixed would remove the element from the document flow, changing the location of the following element, which containing the image data. The static positioning is a very minor inconvenience in a browser used by almost nobody, while still 100% functional. Acceptable compromise for me.
Absolute positioning is not usable as the parent element is scrolled.
I’ve also done the layout with
position: fixed, that’s compatible with all browsers. This solution had many complications: the pointer (mouse) events were consumed, making it impossible to use mouse scroll to open and close the image metadatabar. I could circumvent this with
pointer-events: none;", however then the image could not be clicked to zoom in, the occasional horizontal scrollbar would be unclickable, the individual buttons and popups needed pointer-events: all;` to capture mouse events, not to say that scrolling did not work over those. Fixed position was the least satisfactory.
The issues with fixed positioning were the most unexpected and troublesome. Sticky works the best in many regards.