Page MenuHomePhabricator

Highlight for references extends above ref
Closed, ResolvedPublic

Description

Steps to reproduce:

  1. Open any article with a reference.
  2. Click the reference.

Expected:
The reference is highlighted using a light blue background.

Actual:
The background extends above the reference, covering the ::before element.

Related Objects

Event Timeline

ashley added subscribers: SamanthaNguyen, matmarex, Isarra and 2 others.

This seems to be caused by the :target:before rule in /skins/Timeless/resources/screen-desktop.less; specifically its height and margin properties. Setting height to auto and margin to 0 seems to fix the references list, but I'm not sure what that could be breaking, if anything. Still, we'll probably want a more precise fix and maybe we don't even want to touch the offending CSS rule.

cc'ing @Isarra @matmarex @SamanthaNguyen @TheDJ for additional input.

Change 401188 had a related patch set uploaded (by SamanthaNguyen; owner: SamanthaNguyen):
[mediawiki/skins/Timeless@master] Remove fake element created before links so background aligns correctly

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

BeforeAfter
image.png (768×1 px, 145 KB)
T181490-after-patch.png (768×1 px, 145 KB)

This was tested on Chrome v63.0.3239.84 (latest stable version), Windows 10 platform.

Change 401188 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Remove fake element created before links so background aligns correctly

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

SamanthaNguyen claimed this task.
SamanthaNguyen triaged this task as Medium priority.
SamanthaNguyen removed a project: Patch-For-Review.
SamanthaNguyen removed a subscriber: gerritbot.