Page MenuHomePhabricator

Horizontal shift when scrollbar appears as you transition between states in Minerva and Vector
Closed, ResolvedPublic

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.

Details

Related Gerrit Patches:
mediawiki/skins/Vector : masterSet `overflow-y` to `scroll` to prevent reflow
mediawiki/skins/MinervaNeue : masterSet `overflow-y` to `scroll` to avoid reflow

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.

Change 551672 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Set overflow-y to scroll to prevent reflow

https://gerrit.wikimedia.org/r/551672

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptNov 18 2019, 10:44 PM

Change 551678 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Set overflow-y to scroll to avoid reflow

https://gerrit.wikimedia.org/r/551678

Change 551672 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Set overflow-y to scroll to prevent reflow

https://gerrit.wikimedia.org/r/551672

Change 551678 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Set overflow-y to scroll to avoid reflow

https://gerrit.wikimedia.org/r/551678

You will have to carefully test that this doesn't break any modal dialogs / drawers / etc. that are supposed to prevent the scrolling of the page.

OOUI is probably compatible, as long as you apply overflow-y: scroll on body (after we experimented with it in 2aa75094e3e8c5cf6b9a7ece32436fabe46baf14 / 4a167fb00d259e596545f9d057acf92fa1aabbde), but you should also test OOUI dialogs in both of the skins just in case.


I have to say that I'm not sure how I feel about this solution overall. It will look a bit silly on short pages that wouldn't otherwise have a scrollbar (e.g. https://en.wikipedia.org/wiki/Eemeli_Aakula).

This change has added visible scrollbar to all pages on Vector, regardless of page needing scrollbar or not. What @matmarex wrote above.

I have found one example from howiki, that is already on 1.35.0-wmf.8 in production, and with small enough content and Vector sidebar, to show this:

Jdlrobson closed this task as Resolved.Jan 15 2020, 6:15 PM
Jdlrobson claimed this task.

I think this is the right behaviour. I'm not seeing any obvious bugs a month later - please open specific ones if they exist.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptJan 15 2020, 6:15 PM