Page MenuHomePhabricator

MultimediaViewer popup on mobile allows article content to "leak through" because of missing z-index override
Closed, ResolvedPublic

Description

Expected:
Overlay overlays all content

Actual:
MultimediaViewer popup on mobile allows article content to "leak through".

For example: https://pl.m.wikipedia.org/wiki/Kraków_Wisła#/media/Plik%3AWisla1.jpg


The "pin" and label from the location map in the infobox is visible while MultimediaViewer popup is open. Article screenshot for comparison:

The same works correctly in desktop mode: https://pl.wikipedia.org/wiki/Kraków_Wisła#/media/Plik%3AWisla1.jpg, because the popup (<div class="mw-mmv-wrapper">) has z-index: 1001. These styles (and indeed this entire element) are missing on mobile.

Developer notes

We may have to bump z-indexOverlay and @z-indexOverOverla to extremely high number.

Event Timeline

matmarex created this task.Apr 30 2018, 9:54 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptApr 30 2018, 9:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Tgr added a subscriber: Tgr.May 1 2018, 8:22 AM

See also T40848.

Jdlrobson updated the task description. (Show Details)May 1 2018, 8:34 PM
Jdlrobson added a subscriber: Jdlrobson.

It's a shame z-index can't be overriden by parents :/
The z-index of 1001 seems exceedingly high. While we can fix this particular case, given editors can define any z-index the art is picking a good number/capping the result. We can definitely bump the variable containing the z-index up for mobile but what to?

Restricted Application added a project: Readers-Web-Backlog. · View Herald TranscriptMay 1 2018, 8:37 PM

It's a shame z-index can't be overriden by parents :/
The z-index of 1001 seems exceedingly high. While we can fix this particular case, given editors can define any z-index the art is picking a good number/capping the result. We can definitely bump the variable containing the z-index up for mobile but what to?

As @Tgr points out, if you wanted to really prevent the user-defined article content from overlaying your stuff, you could put it in a stacking context (e.g. by setting a z-index on some parent element), which will prevent z-indexes defined by children from leaking out (effectively, it's as if the parent overrode the child z-indexes). But I don't know mobile stuff well enough to tell if you had a reason not to do it. Maybe it can be done.

I think it's worth keeping details like this (z-index on the overlay) as similar to the desktop mode as possible, so that our editors who often only view pages in desktop mode will not break them on mobile.

Change 430263 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Content area needs a z-index

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

t (e.g. by setting a z-index on some parent element), which will prevent z-indexes defined by children from leaking out (effectively, it's as if the parent overrode the child z-indexes).

My bad. I thought we were doing this but apparently not. No reason not to...

Change 430263 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Content area needs a z-index

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

ovasileva closed this task as Resolved.May 7 2018, 9:44 AM
ovasileva claimed this task.
ovasileva triaged this task as Normal priority.

Looks good to me. No leaked pins

Vvjjkkii renamed this task from MultimediaViewer popup on mobile allows article content to "leak through" because of missing z-index override to vxdaaaaaaa.Jul 1 2018, 1:13 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed ovasileva as the assignee of this task.
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from vxdaaaaaaa to MultimediaViewer popup on mobile allows article content to "leak through" because of missing z-index override.Jul 2 2018, 1:12 AM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to ovasileva.
CommunityTechBot lowered the priority of this task from High to Normal.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.