On English Wikipedia, Template:Ref overlaps with surrounding text
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Rummskartoffel
	Jun 29 2022, 11:52 AM

Description

Steps to reproduce

Navigate to a page on English Wikipedia with content like this (minimal example at w:User:Rummskartoffel/overlapping old style ref example, see also https://en.wikipedia.org/api/rest_v1/page/mobile-html/User%3ARummskartoffel%2Foverlapping_old_style_ref_example):

foo{{ref|1}} bar

Expected results

The page should be rendered as follows: the word "foo" followed with no intervening space by a superscript link with the text "[1]" in a smaller font, then a space, and then the word "bar", as it does in the browser. Screenshot of browser rendering:

Actual results

The word "foo", the superscript link, and the word "bar" all overlap. Screenshot of app rendering:

Environments observed

App version: 2.7.50406-r-2022-06-14
Android OS versions: 9
Device model: Huawei Honor 7x (BND-721)
Device language: German

Note

For clarity: This issue does not occur when <ref> tags are used in place of w:Template:Ref, which is deprecated but still used as much as about 20_000 times.

Details

	Subject	Repo	Branch	Lines +/-
	On English Wikipedia, Template:Ref overlaps with surrounding text	mediawiki/services/mobileapps	master	+49 -32

Customize query in gerrit

Event Timeline

Rummskartoffel created this task.Jun 29 2022, 11:52 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 29 2022, 11:52 AM

Dbrant edited projects, added Product-Infrastructure-Team-Backlog-Deprecated; removed Android-app-Bugs.Jun 29 2022, 4:04 PM

Dbrant moved this task from Needs Triage to Tracking on the Wikipedia-Android-App-Backlog board.

Jgiannelos edited projects, added Parsoid; removed Product-Infrastructure-Team-Backlog-Deprecated.Jun 30 2022, 2:21 PM

@Jgiannelos Parsoid's output seems ok,
https://en.wikipedia.org/api/rest_v1/page/html/User%3ARummskartoffel%2Foverlapping_old_style_ref_example

This looks like it's coming from prepareSupLinks,
https://github.com/wikimedia/mobileapps/blob/master/lib/mobile/MobileHTML.js#L1020-L1040

<sup> is an allowed literal tag in wikitext, so maybe the styling there is assuming it'd only be found coming from <ref> tags?

This is introduced after: https://gerrit.wikimedia.org/r/c/mediawiki/services/mobileapps/+/692972
It looks like by removing the CSS overrides for margin the issue from the report is fixed.

Jgiannelos edited projects, added Product-Infrastructure-Team-Backlog-Deprecated; removed Parsoid (Tracking).Jul 6 2022, 10:36 AM

Jgiannelos moved this task from Needs triage to Upcoming on the Product-Infrastructure-Team-Backlog-Deprecated board.

Jgiannelos triaged this task as Medium priority.Jul 6 2022, 10:53 AM

Specifically it looks like the CSS is applied in the else case here:
https://github.com/wikimedia/mobileapps/blob/master/lib/mobile/MobileHTML.js#L1100

vadim-kovalenko claimed this task.Jul 12 2022, 9:04 AM

vadim-kovalenko moved this task from Upcoming to Kanban on the Product-Infrastructure-Team-Backlog-Deprecated board.

vadim-kovalenko edited projects, added Product-Infrastructure-Team-Backlog-Deprecated (Kanban); removed Product-Infrastructure-Team-Backlog-Deprecated.

vadim-kovalenko moved this task from To Do to Doing on the Product-Infrastructure-Team-Backlog-Deprecated (Kanban) board.

Change 813580 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/services/mobileapps@master] On English Wikipedia, Template:Ref overlaps with surrounding text

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

gerritbot added a project: Patch-For-Review.Jul 13 2022, 7:03 AM

This issue happened because the template utilizes .plainlinks a { padding: 0 !important } rule from base.css. I explicitly set !important for paddings of the touch target links.
@MSantos , @Jgiannelos