Problem/Motivation

Not sure how possible this actually is.

Olivero's ::isDesktopNav() method does the following:

 function isDesktopNav() {
    const navButtons = document.querySelector(
      '[data-drupal-selector="mobile-buttons"]',
    );
    return navButtons
      ? window.getComputedStyle(navButtons).getPropertyValue('display') ===
          'none'
      : false;
  }

the ::getComputedStyles() call causes a stylesheet recalculation on every page request on desktop, even though the DOM itself doesn't change.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
Screenshot from 2026-01-18 09-39-15.png154.95 KBcatch

Issue fork drupal-3568141

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

catch created an issue. See original summary.

catch’s picture

catch
he/him
Primary language English
commented
Issue tags: +Performance

Actually here's a possible approach. In the default state where nothing has been toggled, we can skip the isDesktopNav check altogether and allow the toggling to run, because it doesn't actually change anything, it won't force a style recalculation.

catch opened merge request !14388

catch’s picture

catch
he/him
Primary language English
commented
Status: Active » Needs review
catch’s picture

catch
he/him
Primary language English
commented

Calls to ::isDesktopNav show up later in the performance profile but without triggering a style recalculation. Given the element doesn't even appear to exist when this runs it seems OK to switch the check in this case. Without checking for null, managed to break several functional js tests.

nod_ closed merge request !14388

nod_ reopened merge request !14388

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Seems pretty straight forward. And olivero nav appears to be working the same as expected.

lauriii made their first commit to this issue’s fork.

  • lauriii committed cfdccec3 on main 
    fix: #3568141 Try to avoid style recalculation in Olivero's isDesktopNav...

  • lauriii committed 371e0730 on 11.x 
    fix: #3568141 Try to avoid style recalculation in Olivero's isDesktopNav...

  • lauriii committed 9bc25f18 on 11.3.x 
    fix: #3568141 Try to avoid style recalculation in Olivero's isDesktopNav...

lauriii closed merge request !14388

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed! Thank you.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.