Page MenuHomePhabricator

VE and other OOUI dialog overlays results in scrollbar disappearing (all skins) and can mess up various relatively positioned styles underneath overlay (timeless desktop-small)
Open, Needs TriagePublic

Description

None of this impedes usage, but looks anything from not particularly noticeable to outright dubious depending on what theme is active. Because the scrollbar just vanishes, leaving behind whatever background is behind all of the content, it can be quite the contrast.

Timeless desktop-small issues are largely a timeless problem, but also indicate some other side effects that are possible from this approach.

Event Timeline

Isarra created this task.Sat, Aug 24, 2:05 PM
Isarra renamed this task from VE dialog overlay results in scrollbar disappearing (all layouts) and non-fixed header being positioned incorectely (desktop-small) to VE dialog overlay results in scrollbar disappearing (all layouts) and non-fixed header being positioned incorrectly (desktop-small).Sat, Aug 24, 2:09 PM
Isarra updated the task description. (Show Details)

The scrollbar thing is intentional/unavoidable – when a OOUI dialog opens, we disable the scrolling of the page using overflow: hidden; (by adding the .oo-ui-windowManager-modal-active class to <body>), and doing that also removes the scrollbar.

When doing so, we also set margin-right on the <body> equal to the width of the scrollbar, and position: relative; (via the CSS class), so that the content of the page doesn't shift. However, this doesn't seem to work well for Timeless (maybe because menus are absolutely positioned). And this is what is causing the header mess, the position: relative; apparently breaks some positioning.

JTannerWMF added a subscriber: JTannerWMF.

The Editing-team isn't actively working on this particular skin

Isarra added projects: Vector, MonoBook.EditedThu, Sep 12, 8:42 PM

The scrollbar thing also looks quite strange in MonoBook and Vector, just doesn't stand out as much.

Is there any particular reason you can't just disable scrolling outside of the active dialogue window while the overlay is active? As in, disable the effects of actions that would move around on the content, instead of changing how the content itself is.

Isarra renamed this task from VE dialog overlay results in scrollbar disappearing (all layouts) and non-fixed header being positioned incorrectly (desktop-small) to VE and other OOUI dialog overlays results in scrollbar disappearing (all skins) and can mess up various relatively positioned styles underneath overlay (timeless desktop-small).Thu, Sep 12, 9:01 PM
Isarra edited projects, added OOUI; removed VisualEditor.
Isarra updated the task description. (Show Details)

I don't think there is a reliable way to prevent scrolling without getting rid of the scrollbar. The 'scroll' event is not preventable. You could prevent events for things that cause scrolling: keyboard arrow keys, mouse wheel, touch and pan (this would be very tedious), but ultimately on desktop you can scroll by clicking on the scrollbar and AFAIK there is no way to prevent that. The best you can do is scroll back to the previous position afterwards, which in my opinion is absolutely awful to experience as a user.