Regarding the question of using position: sticky
:
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.