Problem/Motivation
In cases where an element has a data-offset-* attribute and is set to display: none; in a stylesheet, Drupal.displace() will incorrectly still treat it as visible despite it very much not being so, because it checks the inline style attribute only:
// If the element is not visible, do consider its dimensions.
if (el.style.display === 'none') {
continue;
}
This has surfaced when using the new Navigation module, where it sets display: none; in a stylesheet on .admin-toolbar-control-bar, and you end up with unexpected gaps since Drupal.displace() thinks it's visible.
Steps to reproduce
Enable Navigation module. Visit front-end theme were displacement is taken into account, e.g. uses the CSS custom properties. Notice the gap along the top like so:
Proposed resolution
At the very least, getComputedStyle() should be used to get the calculated value rather than just the inline value. For a much more robust solution that actually tries to catch all the ways an element can be considered actually hidden, jQuery's :hidden selector is rather informative.
When switching to getComputedStyle(), the element is correctly ignored and does not affect displacement:
Remaining tasks
Replace inline style check with getComputedStyle().
User interface changes
No more weird displacement gaps.
Introduced terminology
None.
API changes
None.
Data model changes
None.
Release notes snippet
None?