Show sticky elements when a modal is displayed

[lykahb]

If the website displays a modal sticky element while blocking the scrolling, hiding that element will essentially make the website unusable. Often it is a full-screen gallery or a modal dialog.

Now modals are handled with classification the elements by size and locations that allows to display "splashes" - the elements that take the most of the screen. Classification is enough for the majority of full-screen galleries. However, it relies on the sticky element having the right size (to be classified as splash) when it is created or assigned the sticky property. If the sticky element exists and has smaller dimensions before the gallery is shown, it will be hidden and the website will freeze. There are some other cases when a modal gets hidden.

To make freezes more rare, we need to detect modals in a more robust way and, to err on the safer side, display all sticky elements once a modal is detected.

There are two solutions to improve modal detection:

1. Improve element classification. In the general case that is a hard problem. It should involve more checks if the element is visible, that is fragile as visibility can be set with a number of properties. Here is an incomplete list of what defines if the element is visible: display, visibility, opacity, z-index, moving it outside of the screen boundaries.
2. Check if the scroll is disabled. Here a challenge is to detect where the content is scrolled. Sticky ducky only checks for the scroll events on window and body which the absolute majority of sites have. A practical solution is to check overflow-y on html and body. It won't work on the more unusual layouts, where the entire content is scrolled within another element inside of the body.