Page MenuHomePhabricator

Section toggle indicators sometimes appear in weird places on mobile Timeless
Closed, ResolvedPublic

Description

As a result of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/533359, MobileFrontend's section collapsing code now also runs on other skins. I noticed that on Timeless in particular the toggles sometimes appear in weird places:

It took me a while to understand why. The problem is triggered by the right-floated images on this page. CSS layout rules force the section toggle (which is left-floated) to appear no higher on the page than the previous floated element, which in this case is the right-floated image:

  1. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

The same problem caused by floated images is described here: https://en.wikipedia.org/wiki/Template:Stack#Examples


Other skins accidentally avoid this issue by setting overflow: hidden (Vector and most other skins) or display: table (Minerva) on the h2 element, which causes it to become a new block formatting context for the elements inside it, like the toggle.

To fix this problem for Timeless, either we should also do that, or remove the float from the toggle and adjust its placement in some other way.

Details

Related Gerrit Patches:

Event Timeline

matmarex created this task.Sep 5 2019, 10:39 PM
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptSep 5 2019, 10:39 PM
matmarex claimed this task.Sep 5 2019, 11:14 PM
Isarra added a subscriber: Isarra.Sep 5 2019, 11:15 PM

Other skins accidentally avoid this issue by setting overflow: hidden (Vector and most other skins)

T193270

Change 534705 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Toggler: Don't use float on indicator to avoid "stacking" with floated images

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

Change 534705 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Toggler: Don't use float on indicator to avoid "stacking" with floated images

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

matmarex closed this task as Resolved.Sep 6 2019, 1:42 PM