[Drupal 10.1] Flickering sidebar nav width on page load
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3356350. --> Reported by: [bnjmnm](https://www.drupal.org/user/2369194) Related to !264 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>This core issue is likely to land in 10.1.x or 10.2.x: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/drupal/issues/2998451" title="Status: Closed (fixed)">#2998451: Toolbar tray rendering can result "flickering" resizing of content area to accommodate open trays</a></span></p> <p>This change <em>can</em> result in brief flickering of <em>hidden menus</em> on page load. (drupal toolbars have plenty of flickering beyond this, this is very specific to an un-hovered menus briefly being shown on screen during toolbar load.</p> <p>Fortunately, there's a very narrow use case in which this can occur: <strong>It will only happen if the user is on a tab that was previously using not-Gin-Toolbar then switched to using Gin-Toolbar AND the toolbar had an open tray.</strong>. Basically, the toolbar is aware of what tray was open and creates a reflow-preventing placeholder for it as the toolbar loads. That tray is ultimately replaced by the real one. </p> <p>As soon as a user switches tabs, there's no problem as the behavior is due to specific sessionStorage values that won't be set to the problem-causing ones if Gin toolbar is active. </p> <p>Although this will only occur in very specific circumstances, I wanted to be sure this was documented in the issue queue here. It may be sufficient to just warn users installing Gin Toolbar. You could also prevent unwanted side effects by ensuring the sessionStorage <code>Drupal.toolbar.toolbarState</code> is cleared on page load.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>
issue