Page MenuHomePhabricator

Differences between read mode and edit mode on mobile: some headings shifted by 1px up or down
Open, LowPublic

Description

In read mode, to position the section edit links exactly where we want them to be, the headings are wrapped in another element with display: table.

In edit mode we can't use display: table, because it causes issues with the editable surface in iOS Safari (T202991). We replicate the same effect using other CSS properties, but as you noticed, the effect is not perfectly identical. We discussed this briefly in code review of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/489379 but at the time decided that it was good enough. We could certainly revisit it, it should not be difficult to fix, just tedious.

Read modeEdit mode
image.png (980×653 px, 44 KB)
image.png (980×653 px, 40 KB)

Event Timeline

JTannerWMF added subscribers: ovasileva, phuedx, JTannerWMF.

Hey we believe this would be in the Readers Web wheelhouse.

ovasileva triaged this task as Medium priority.Mar 27 2019, 11:48 AM
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
ovasileva added a subscriber: alexhollender.

@alexhollender - any additional thoughts on priority here?

@ovasileva priority seems low to me, though @iamjessklein may feel differently. @matmarex what do you prepose we do to correct this?

Jdlrobson lowered the priority of this task from Medium to Low.Apr 2 2019, 11:40 PM
Jdlrobson added a subscriber: Jdlrobson.

I'm not sure how to fix this, but obviously the use of display: table in view mode is intentional. We don't have much incentive to address this in reading web as we'd have to worry about cached HTML. Can we live with this slight difference?

In Triage with @matmarex who agrees the priority is low here. So we are likely not going to work on this. Looping in @ppelberg for awareness.