Page MenuHomePhabricator

Edit notice renders behind content instead of on top (FOUC)
Closed, ResolvedPublic1 Estimated Story Points

Description

  1. Start visual editing on https://www.mediawiki.org/wiki/Help:PerformanceInspector
  2. Observe edit notice
At first ..Later...
Screen Shot 2017-06-11 at 15.03.21 1.png (717×1 px, 202 KB)
Screen Shot 2017-06-11 at 15.03.21 2.png (698×1 px, 186 KB)

Event Timeline

Deskana moved this task from To Triage to TR0: Interrupt on the VisualEditor board.

Can't find a breakpoint to debug this. Could be related to how PopupWidgets resize them themselves, or something to do with the UI surface re-rendering. Pinging @matmarex

There are some transforms on the .oo-ui-toolbar-bar during the toolbar animation that seem to be causing this. And there's this snippet – removing it makes the issue reproductible not just during the toolbar animation:

.ve-init-mw-desktopArticleTarget-toolbar-opened > .oo-ui-toolbar-bar {
	/* Reset trasnform once open to avoid breaking z-index */
	transform: none;
}

I'm not sure why transforms are breaking z-index (I'll note that there's actually no z-index on .oo-ui-toolbar-bar unless the toolbar is floating), but perhaps we could just not show the popup until the animation is done?

Change 359033 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] Make sure the toolbar is shown on top of surface contents even when not floating

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

Change 359034 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] ve.init.mw.DesktopArticleTarget: Remove some hacks

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

I'm not sure why transforms are breaking z-index

An element with a transform starts a new stacking context. Similar to what position: relative; z-index: 0; would do, but in an even stricter fashion, mainly to allow transitions to effectively use hardware-acceleration without needing to re-compute everything constantly. This is why hacks like transform: translateZ(0) work, any transform gives the subtree its own rendering layer.

Change 359033 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Make sure the toolbar is shown on top of surface contents even when not floating

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

Change 359034 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] ve.init.mw.DesktopArticleTarget: Remove some hacks

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

matmarex claimed this task.
matmarex removed a project: Patch-For-Review.

Change 361679 had a related patch set uploaded (by Jforrester; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b3a7707)

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

Change 361679 merged by Jforrester:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b3a7707)

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