Drupal.displace() only checks inline display: none; instead of calculated styles, leading to

Created on 16 November 2024, about 1 month ago

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() think 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 gaps along the top.

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.

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?

🐛 Bug report
Status

Active

Version

11.1 🔥

Component

javascript

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024