Ref highlights overlap with and obstruct surrounding text
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Rummskartoffel
	Aug 5 2022, 9:55 AM

Description

Steps to reproduce

Navigate to a page with content like this (minimal example at w:User:Rummskartoffel/overlapping ref highlight):

foo<ref>bar</ref> baz

In the reflist at the bottom of the page, tap on the "[1]" to the left of the note "bar".

Expected results

The footnote, and only the footnote, in the page body is highlighted in orange.

Actual results

The footnote in the page body is highlighted, but the highlight is much larger than the footnote and overlaps with surrounding text. The highlight covers up text to the left of the footnote and appears in the background of text to the right of the footnote. Screenshot:

Environments observed

App version: 2.7.50417-r-2022-08-02
Android OS versions: 9
Device model: Huawei Honor 7x (BND-721)
Device language: German

Details

	Subject	Repo	Branch	Lines +/-
	Mobileapps:Ref highlights overlap with and obstruct surrounding text	mediawiki/services/mobileapps	master	+3 -3

Customize query in gerrit

Event Timeline

Rummskartoffel created this task.Aug 5 2022, 9:55 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 5 2022, 9:55 AM

Rummskartoffel attached a referenced file: F35399278: image.png. (Show Details)Aug 5 2022, 9:56 AM

LGoto triaged this task as Lowest priority.Aug 8 2022, 4:38 PM

LGoto edited projects, added Content-Transform-Team; removed Android-app-Bugs.

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

• JMcLeod_WMF edited projects, added Page Content Service; removed Content-Transform-Team.Aug 11 2022, 2:07 PM

Restricted Application added a project: Product-Infrastructure-Team-Backlog-Deprecated. · View Herald TranscriptAug 11 2022, 2:07 PM

• JMcLeod_WMF moved this task from Needs Triage to Icebox on the Page Content Service board.Aug 11 2022, 2:09 PM

• JMcLeod_WMF removed a project: Product-Infrastructure-Team-Backlog-Deprecated.Sep 29 2022, 2:09 PM

We received this from one of our users through the Android support email:

Highlights of text fragments to which notes and footnotes refer are completely opaque and completely obscure the text of the article (see attached screenshots). Can I fix it in some settings?

Kind regards

Screenshot_20221110-214530_Wikipedia.jpg (2×1 px, 742 KB)

Screenshot_20221110-213739_Wikipedia.jpg (2×1 px, 749 KB)

Seddon moved this task from Tracking to Android Release - FY2023-24 on the Wikipedia-Android-App-Backlog board.Feb 7 2023, 7:45 PM

Seddon edited projects, added Wikipedia-Android-App-Backlog (Android Release - FY2023-24); removed Wikipedia-Android-App-Backlog.

JTannerWMF moved this task from Epics in Progress to Needs Eng. Manager on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Feb 7 2023, 9:13 PM

Seddon added a project: Content-Transform-Team.Mar 15 2023, 12:28 AM

• JMcLeod_WMF subscribed.Mar 16 2023, 2:11 PM

I tried the PCS output for dark theme here:
https://en.wikipedia.org/api/rest_v1/page/mobile-html/User%3ARummskartoffel%2Foverlapping_ref_highlight?theme=dark

I don't think i can reproduce it on my browser. Could it be something app specific?

vadim-kovalenko changed the task status from Open to In Progress.Mar 20 2023, 2:23 PM

vadim-kovalenko claimed this task.

vadim-kovalenko added a project: Content-Transform-Team-WIP.

vadim-kovalenko moved this task from Backlog to In Progress on the Content-Transform-Team-WIP board.Mar 20 2023, 2:42 PM

I don't think this can be fixed in PCS only by changing CSS rules and without breaking the layout. Changing z-index won't help: <sup> element isn't a positioned element. The problem was probably caused by setting the solid background to the <sup> element on the app (iOS/Android) level. I can suggest mitigating this issue by changing opacity from solid to ~30%, so the text on the left side will be visible. Here is a small standalone example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   sup {
      background: rgb(255, 255, 0, 0.3);
      margin: -4px -16px -16px -16px;
      padding: 4px 16px 16px 16px !important;
    }
  </style>
</head>
<body>
  <p>foo
    <sup>
      <a href="/">
        <span class="mw-reflink-text">[1]</span>
      </a>
    </sup>
  bar</p>
</body>
</html>

@Dbrant , @Tsevener , what do you think?

@vadim-kovalenko That can probably be an acceptable tradeoff, but let's make it a translucent version of the current color (#fc3), so something like #fc3a.

@Rummskartoffel The reason for the highlight to extend onto the surrounding text is that we're highlighting the "touch area" of the reference, which is exaggerated to improve accessibility. If we update the color of the highlight to be translucent, so that the text on both sides of the highlight remains readable, would that be acceptable?

Screenshot_20230323_091820.png (2×1 px, 179 KB)

• JMcLeod_WMF moved this task from Icebox to In Progress on the Page Content Service board.Mar 23 2023, 2:12 PM

• JMcLeod_WMF removed a project: Content-Transform-Team.

Accessibility is a good point I hadn't considered; a comparatively tiny highlight only covering the footnote text itself might not be as easily visible.

In any case, my concern was mostly that the surrounding text wasn't readable, which would be fixed by this change, so LGTM.

Jgiannelos moved this task from In Progress to Blocked on the Content-Transform-Team-WIP board.Mar 27 2023, 1:58 PM

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

[mediawiki/services/mobileapps@master] Mobileapps:Ref highlights overlap with and obstruct surrounding text

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

gerritbot added a project: Patch-For-Review.Mar 28 2023, 11:06 AM

vadim-kovalenko moved this task from Blocked to Code Review on the Content-Transform-Team-WIP board.Mar 28 2023, 11:08 AM

• JMcLeod_WMF unsubscribed.Mar 30 2023, 1:28 PM

MSantos moved this task from Code Review to To Deploy on the Content-Transform-Team-WIP board.Apr 10 2023, 3:13 PM

Change 902624 merged by jenkins-bot: