Page MenuHomePhabricator

Regression: Whitespace to right of title in Firefox
Closed, ResolvedPublic2 Estimated Story Points

Description

  • Enable new Vector and visit the following page in Firefox (I'm using 88.0.1 on macOS 10.15.7): https://en.wikipedia.org/wiki/Mark_Selby
  • Attempt to select the title text as if you're copying it. You should see the following:

Screen Shot 2021-05-09 at 19.19.09.png (587×1 px, 160 KB)

  • Here's old Vector for comparison:

Screen Shot 2021-05-09 at 19.18.51.png (527×1 px, 158 KB)

I'm pretty sure the extra space started appearing after the new interlanguage selector was deployed. Safari seems unaffected.

QA Results - Prod

ACStatusDetails
1T282318#7212677

Event Timeline

Can reproduce, but code doesn't provide a clear hint at the moment. Even when display:noneing all other elements in header space remains.

Jdlrobson subscribed.

The issue is the #contentSub and #contentSub2 element styling rules in core/resources/src/mediawiki.skinning/interface.less. Those have margins that should likely not apply when their elements are empty.

Jdlrobson renamed this task from New Vector creates extra space in title in Firefox to Empty contentSub elements lead to additional margin under title in Firefox.May 26 2021, 3:55 PM

@Jdlrobson No, that's not the cause. It's something weirder.
This task is about this space, presumably not a margin.

image.png (270×1 px, 50 KB)

In my screenshot test I've deleted #contentSub and #contentSub2 from DOM and space is still remaining.

Screen Shot 2021-05-26 at 2.53.51 PM.png (240×512 px, 31 KB)

Isn't that 1px relating to rounding? I didn't notice it tbh. If this is a big problem it can be fixed by using a more sensible line height/font-size combo.

It's an extra space, as the description says:

image.png (118×342 px, 6 KB)

ahhh okay thanks for the sharing understanding. That's just whitespace

<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>
                        {{{html-title}}}
                </h1>

should become

<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>
                        {{{html-title}}}{{!
                }}</h1>
Jdlrobson renamed this task from Empty contentSub elements lead to additional margin under title in Firefox to Whitespace to right of title in Firefox.May 26 2021, 10:04 PM
ovasileva renamed this task from Whitespace to right of title in Firefox to Regression: Whitespace to right of title in Firefox.May 27 2021, 8:59 AM
ovasileva triaged this task as Medium priority.
ovasileva subscribed.

Team doesn't have bandwidth to analyze this right now given the 4 day week.

I can confirm this is the text with the problem

Screen Shot 2021-06-09 at 9.08.36 AM.png (72×448 px, 14 KB)

Once that's trimmed, we're all good here, so solution is hopefully pretty straightforward.

Change 701431 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove whitespace from page title template

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

bwang removed bwang as the assignee of this task.Jun 24 2021, 5:17 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
bwang subscribed.
Jdlrobson updated Other Assignee, added: bwang.

Change 701431 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove whitespace from page title template

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

Let me know if you need some explicit QA steps on this one.

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Enable new Vector and visit the following page in Firefox (I'm using 88.0.1 on macOS 10.15.7): https://en.wikipedia.org/wiki/Mark_Selby
Attempt to select the title text as if you're copying it.
✅ AC1: There should be no white space at the end of the title.

Screen Shot 2021-07-14 at 9.20.01 AM.png (758×1 px, 267 KB)