Page MenuHomePhabricator

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

Description

  1. Start visual editing on https://www.mediawiki.org/wiki/Help:PerformanceInspector
  2. Observe edit notice
At first ..Later...

Event Timeline

Krinkle created this task.Jun 11 2017, 10:04 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 11 2017, 10:04 PM
Krinkle edited projects, added VisualEditor-MediaWiki; removed VisualEditor-Media.
Krinkle added a subscriber: Deskana.
Deskana triaged this task as High priority.Jun 12 2017, 8:02 AM
Deskana moved this task from To Triage to TR0: Interrupt on the VisualEditor board.
Jdforrester-WMF set the point value for this task to 1.Jun 13 2017, 5:27 PM

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 closed this task as Resolved.Jun 27 2017, 11:58 AM
matmarex claimed this task.
matmarex removed a project: Patch-For-Review.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptJun 27 2017, 11:58 AM

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