| Volker_E | |
| Sep 11 2018, 8:56 PM |
| F31455825: howiki scrollbar.png | |
| Dec 3 2019, 11:27 PM |
| F29934783: Screenshot 2019-08-01 at 3.51.55 PM.png | |
| Aug 1 2019, 10:53 PM |
| F29934782: Screenshot 2019-08-01 at 3.51.51 PM.png | |
| Aug 1 2019, 10:53 PM |
| F25798661: 3.png | |
| Sep 13 2018, 5:46 AM |
| F25798660: 1.png | |
| Sep 13 2018, 5:46 AM |
| F25778925: horizontal movement.mov | |
| Sep 11 2018, 8:59 PM |
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):
Add overflow: scroll to the body tag so the scrollbar is always present.
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.)
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
Change 551678 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Set overflow-y to scroll to avoid reflow
Change 551672 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Set overflow-y to scroll to prevent reflow
Change 551678 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Set overflow-y to scroll to avoid reflow
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:
I think this is the right behaviour. I'm not seeing any obvious bugs a month later - please open specific ones if they exist.
Change 604786 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/Vector@master] Revert "Set overflow-y to scroll to prevent reflow"
Change 604787 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Revert "Set overflow-y to scroll to avoid reflow"
These patches shouldn't be reverted. We should not re-introduce Minerva/Vector bugs (specifically ones resolved a long time ago) to fix OOUI bugs. Happy to help with the OOUI bug, and happy to live with a short term fix of a similar nature provided its in the OOUI library.
Change 605190 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Add temporary workaround for scrollIntoView bug when OOUI is loaded
Change 604786 abandoned by Esanders:
Revert "Set overflow-y to scroll to prevent reflow"
Reason:
See I34c05c512d731eb5977c51f503f7f29ebcdfbdbf
Change 604787 abandoned by Esanders:
Revert "Set overflow-y to scroll to avoid reflow"
Reason:
See I34c05c512d731eb5977c51f503f7f29ebcdfbdbf
In my experience the page layout jumping when a scrollbar is shown is a more disturbing experience than having a disabled scrollbar on short pages, therefore I support @Jdlrobson's preference. It seems to me this is the better trade-off.
If someone wants to put effort into hiding the scrollbar on short pages, this can be done with JS, however the horizontal scrollbar and browser differences (most notably Mac) will make this a non-trivial task that requires some research and testing to get it right.
Alternatively, the sidebar can be styled, making it less noticeable when disabled. This can be done with a few lines of Less (sample) using the mixins I've made: patch 579620
These handle FF, WebKit and IE scrollbar styling.
Change 605190 abandoned by Esanders:
Add temporary workaround for scrollIntoView bug when OOUI is loaded
Reason:
Ib6bda230f3ab4f0a12454cc7eafc220ce5f7f700 has been merged into OOUI