Page MenuHomePhabricator

A formatting error when displaying a seat distribution graphic
Closed, ResolvedPublicBUG 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 (1,003×790 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-Platform-Team.
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App board.
LGoto moved this task from Product Backlog to Bug Backlog on the Wikipedia-iOS-App board.

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,855×1,543 px, 183 KB)

image.png (1,854×1,644 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.

Fixed on 7.8.0 (5589)

Tested on iPhone on iOS 26.0 and iPad on iPadOS 18.5. Tested on multiple articles.