Page MenuHomePhabricator

Horizontal shift when scrollbar appears as you transition between states in Minerva and Vector
Open, Needs TriagePublic

Description

There's a small redraw (on Chrome/MacOS) resulting in a horizontal shift when scrollbars kick in on Vector.
First reported in T195986#4572417 by @Ryasmeen.

Screen capture:

A similar issue impacts Minerva on tablets and desktop when you click a reference and the transition animation (pay attention to the scroll bar on right):


Developer notes

Add overflow: scroll to the body tag so the scrollbar is always present.

Event Timeline

Volker_E created this task.Sep 11 2018, 8:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 11 2018, 8:56 PM

Screenshots from the recording:

The first column is using 20% width, so its computed width changes when the scrollbar appears and the page's width changes. I suppose you could set its size in ems instead to avoid this if it's annoying/noticeable. (I'll note that the same behavior is noticeable on the non-OOUI preferences page.)

Jdlrobson renamed this task from Horizontal shift when scrollbar appears on page load to Horizontal shift when scrollbar appears as you transition between states in Minerva and Vector.Aug 1 2019, 10:53 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

This impacts a lot of websites
The fix is simply adding overflow: scroll; to the body tag so it's always present.
Also happens on references when you click one on Minerva so should probably apply to both.