Problem/Motivation

Watch the screencast: https://www.drupal.org/files/issues/Settings%20Tray%20weird%20autoscroll.... This is an unintentional animation that is causing a usability problem.

Note that this may induce nausea in people with motion sickness, so it's also an accessibility problem.

Proposed resolution

Remove the animation.

Remaining tasks

None.

User interface changes

One unintentional animation change less.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#5 2896143-5.patch602 bytestedbow
#3 core_autoscroll_bug.mp4664.15 KBtedbow
Settings Tray weird autoscroll.mp41.73 MBWim Leers
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers created an issue. See original summary.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented
Issue summary: View changes
tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
CreditAttribution: tedbow at Acquia commented
FileSize
core_autoscroll_bug.mp4664.15 KB

I am seeing the same animation jump without Settings Tray installed. Can you(or someone) else confirm it happens regardless of whether Settings Tray module is enabled.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

I don't see actual scrolling/animating in #3? What I'm seeing there is toolbar jumpiness.

Jumpiness vs smooth scrolling.

Perhaps it has the same root cause, but Settings Tray's CSS is making the core bug's jumpiness smoothly animated? That'd be hilarious :D :D

tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
CreditAttribution: tedbow at Acquia commented
Status: Active » Needs review
FileSize
2896143-5.patch602 bytes

Ok I think I found the offending CSS.

Not sure why it was there. Maybe to animate the toolbar change when going into edit mode. Seems fine without it.

DyanneNova’s picture

DyanneNova
she/her
CreditAttribution: DyanneNova at Acquia commented
Status: Needs review » Reviewed & tested by the community

This looks good to me!

I think the animation effect could be nice if working correctly, but I don't think Settings Tray should be overriding toolbar styling for general activity. If we want to add the effect back at some point I think it should belong in Toolbar.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented
Issue tags: +CSS

Manually tested, fix confirmed!

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii as a volunteer commented
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs issue summary update

It would be great to have the user interface changes for the settings tray in the issue summary

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented
Title: Weird auto-scrolling of the body (data-off-canvas-main-canvas?) while Settings Tray is installed » Unintentional animation of the body while Settings Tray is installed
Issue summary: View changes
Status: Needs work » Reviewed & tested by the community
Issue tags: -Needs issue summary update

  • xjm committed 649ee1b on 8.4.x 
    Issue #2896143 by tedbow, Wim Leers, DyanneNova: Unintentional animation...
xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Version: 8.4.x-dev » 8.3.x-dev
Status: Reviewed & tested by the community » Fixed

This bug indeed makes it frustrating to use Drupal when Settings Tray is enabled, because the sliding around happens even when the tray is not in Edit mode.

I tested this patch with various combinations of:

  • Toolbar in vertical or horizontal mode.
  • Edit mode not active and clicking links in the body area.
  • Editing and saving things in Edit mode.
  • Toggling Edit mode on and off.

I identified several other bugs, but confirmed that they existing in HEAD:

  1. The Edit button on the normal toolbar flickers when Settings Tray is enabled and you navigate in the page.
  2. The toolbar briefly appears after saving something in Settings Tray, then disappears again as the empty Edit toolbar reappears.
  3. The cursor when hovering over text fields for (e.g.) the site name is a pointing hand (like for a link) rather than a text cursor.
  4. (Toolbar bug unrelated to settings tray) When you switch the toolbar from horizontal mode into vertical mode, then click a link, the toolbar briefly flashes in horizontal mode before reappearing in vertical mode.

If anyone knows of existing bug reports for the above, please do link them. Meanwhile, I committed this fix to 8.4.x and cherry-picked it to 8.3.x since it's still alpha experimental. Thanks everyone!

tacituseu’s picture

tacituseu CreditAttribution: tacituseu commented

Cherry-pick didn't make it to the 8.3.x.

  • xjm committed edc88ae on 8.3.x 
    Issue #2896143 by tedbow, Wim Leers, DyanneNova: Unintentional animation...
xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented

Thanks @tacituseu, helps if I push both branches. :)

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented
Related issues: +#2897306: Remove dead CSS

I just realized while looking at the committed patch that elsewhere in the file there's simply dead CSS: #2897306: Remove dead CSS.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

#11:

  1. Created #2897308: Edit toolbar tab animation is distracting, includes patch.
  2. Created #2897311: When there's non-zero latency, saving the Settings Tray causes the plain Toolbar to be visible first, includes screencast detailing the problem at multiple latencies.
  3. Created #2897320: Settings Tray causes the "pointer" cursor to be used both when hovering over inaccessible links (should use "default" cursor) and when in input[type=text] (should use "text" cursor), includes patch.
  4. I can't reproduce this, so I didn't file an issue for it.

Status: Fixed » Closed (fixed)

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

tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
CreditAttribution: tedbow at Acquia commented
Component: outside_in.module » settings_tray.module

Changing to new settings_tray.module component. @drpal thanks for script help! :)