Improve show/hide transition

Created on 9 June 2025, 25 days ago

Problem/Motivation

When the Toolbar sticky behavior is set to 'Disabled, show on scroll-up' AND the current page contains a sticky table header (e.g. /admin/content), the interaction between the transitioning toolbar and the table header is not always smooth (see video below).

This may be difficult to completely resolve given that Drupal.displace() cannot accurately recalculate offsets until the show/hide transition has completed, but it may be possible to make incremental improvements.

β†’
Original video β†’

Steps to reproduce

Set Toolbar sticky behavior to 'Disabled, show on scroll-up
Scroll up/down a page with a sticky talble header

Proposed resolution

Consider deferring the call Drupal.displace() with a delay value that is as close to the transition duration as possible. Defining those durations as CSS properties would make them available to javascript.

Remaining tasks

  • Open MR
  • Review, test, iterate
  • Merge

User interface changes

N/A

API changes

N/A

Data model changes

N/A

πŸ“Œ Task
Status

Active

Version

3.6

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States justcaldwell Austin, Texas

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

Comments & Activities

  • Issue created by @justcaldwell
  • πŸ‡ΊπŸ‡ΈUnited States erutan

    While technically not the smoothness jank in the video, it falls under improving the show/hide transition. If you scroll down slightly and then stop there's a blank gap at the top of the screen. Thiscould happen if someone just needs to read something barely below the fold.

    Having the hide event only fire after 79px down or w/e would solve this.

Production build 0.71.5 2024