Page MenuHomePhabricator

A formatting error when displaying a seat distribution graphic
Open, LowPublicBUG REPORT

Description

Dear Wiki team, When reading the article about the city of Detmold, I noticed a formatting error when displaying a seat distribution graphic from the Detmold city council in the article about the city of Detmold (politics subsection). Maybe there could be a structural problem with the formatting. This problem does not occur in the web version of the article.

I hope I could help them.
Attached is a screenshot of the error.
Here is the link to the article:
https://de.wikipedia.org/wiki/Detmold?wprov=sfti1
a formatting error when displaying a seat distribution graphic
Version: WikipediaApp/7.2.0.2061 (iOS 14.6; Tablet)

display.PNG (790×1 px, 363 KB)

Event Timeline

ARamadan-WMF updated the task description. (Show Details)
ARamadan-WMF updated the task description. (Show Details)
LGoto triaged this task as Low priority.Mar 21 2023, 6:17 PM
LGoto added a project: Content-Transform-Team.
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.
LGoto moved this task from Product Backlog to Bug Backlog on the Wikipedia-iOS-App-Backlog board.
LGoto added a project: iOS Release FY2022-23.

In browser developer tools it looks like the issue is coming from a custom css rule for dark theme that adds background-color=inherit to the seat diagram template output.

image.png (1×1 px, 183 KB)

image.png (1×1 px, 192 KB)

More specifically by disabling this rule local environment works as expected:
https://github.com/wikimedia/mediawiki-services-mobileapps/blob/master/pagelib/src/transform/ThemeTransform.less#L67

I am not sure though if its something that need to be fixed in the template level to allow dark theme to render properly or in the pagelib css level.

There are a bunch of div elements that should have notheme class to avoid this issue on dark theme: https://de.wikipedia.org/api/rest_v1/page/mobile-html/Vorlage:Sitzverteilung?theme=dark. I'd rather apply a specific class to the template element itself and then recursively add notheme in mobile html then.

Upd: the reason that the first diagram in the example above is not broken on a dark theme, is probably because div tags don't have a text node inside. This might be helpful in terms of solving the issue.