Maniphest T270104

Sidebar overlays content in Firefox 83 when font-size is set to 12px
Closed, ResolvedPublic5 Estimated Story Points
Actions

Description

https://www.mediawiki.org/wiki/Talk:Reading/Web/Desktop_Improvements#Bug?_Annoying_side-menu-flipping

Steps to reproduce

Set browser font size to 12px
Make sure legacy vector is turned off
Go to any page on desktop in Firefox 83
Set browser width to ~1000px

Expected: Sidebar does not overlap content
Observed: Sidebar overlaps content

QA Results - Beta

AC	Status	Details
1	✅	T270104#6829422

QA Results - Prod

AC	Status	Details
1	✅	T270104#6841001

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/Vector	master	+9 -13	Convert max-width layout to relative units

Customize query in gerrit

Event Timeline

ovasileva created this task.Dec 14 2020, 1:48 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 14 2020, 1:48 PM

ovasileva triaged this task as Medium priority.Dec 14 2020, 1:49 PM

ovasileva updated the task description. (Show Details)

ovasileva moved this task from Incoming to QA Tasks / Needs Reproduction on the Readers-Web-Backlog board.Dec 14 2020, 1:55 PM

As requested a screenshot of the problem. Additional Information, though I don't think it should make a difference: Operating System Linux. Tried also with standard browser privacy settings and Adblocker turned off. Exact image-width: 1072px. I tried on Windows with Edge, it seems to be working there.

gh87 added a project: Browser-Support-Firefox.Dec 14 2020, 8:54 PM

@HirnSpuk I still can't replicate this. IS the problem still occurring? Does it happen if ?safemode=1 is appended to the URL ?

@Jdlrobson yes and yes. But I was able to check a little more: ubuntu 16.4/18.4/20.4 Firefox 84. At first it happened only in 16.4, I was pretty puzzled, because I couldn't think of a reason for this. then I realized this is the lowest resolution display: I'm working on different displays, so the scaling is different. I was able to reproduce it by setting the font size to 12 in firefox (needed for the low resolution display). The problem doesn't seem to occur, when working with font-size 16/18, but I was able to reproduce the problem on the Hi-Res Displays with setting the font-size to 12. I also tried on a Macbook with Firefox 78ESR setting font-size to 12: same effect. Regards

PS: Also checked in Edge 87: same effect, if font-size is set to small. So it seems it's not a firefox-issue

Okay I can replicate now ! Thank you! The font-size makes all the difference.

Note overlap on these tabs too:

In T270104#6769292, @Jdlrobson wrote:

Okay I can replicate now ! Thank you! The font-size makes all the difference.

@Jdlrobson - can you add some screenshots if you have them on hand?

• Jdlrobson updated the task description. (Show Details)Jan 22 2021, 4:30 PM

ovasileva edited projects, added Readers-Web-Backlog (Kanbanana-FY-2020-21); removed Readers-Web-Backlog.Jan 25 2021, 4:38 PM

ovasileva removed Edtadros as the assignee of this task.Jan 25 2021, 6:40 PM

ovasileva added a subscriber: Edtadros.

I suspect we need to revisit our ems and pixels usage to address this one.

@Jdlrobson Right at 1042px window width, the content goes behind the open sidebar and the margin-left: 11.5em is no longer active. The correct placement of the content kicks in ~1156px window width. So that means there's a 114px discrepancy possibly within the @media query in the css (if there indeed is one) affecting when that 11.5em left margin is deactivated.

ovasileva set the point value for this task to 5.Jan 27 2021, 5:55 PM

• Jdlrobson moved this task from Upcoming to Ready for Development on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Feb 4 2021, 1:36 AM

Jdrewniak claimed this task.Feb 8 2021, 9:03 AM

Jdrewniak moved this task from Ready for Development to Doing on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.

Change 663313 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Convert max-width layout to relative units

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

gerritbot added a project: Patch-For-Review.Feb 10 2021, 10:08 PM

Jdrewniak removed Jdrewniak as the assignee of this task.Feb 10 2021, 10:10 PM

Jdrewniak moved this task from Doing to Needs Code Review on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.

Jdrewniak added a subscriber: Jdrewniak.

Change 663313 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Convert max-width layout to relative units

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.31; 2021-02-16).Feb 11 2021, 12:00 AM

• Jdlrobson assigned this task to Edtadros.Feb 11 2021, 12:03 AM

• Jdlrobson moved this task from Needs Code Review to Needs QA on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.

Maintenance_bot removed a project: Patch-For-Review.Feb 11 2021, 12:11 AM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Set browser font size to 12px
Make sure legacy vector is turned off
Go to any page on desktop in Firefox 83
Set browser width to ~1000px
✅ AC1: Expected: Sidebar does not overlap content

@Jdlrobson This passes, but when you fiddle with the browser font size it looks like the Language button doesn't adjust accordingly.

Edtadros updated the task description. (Show Details)Feb 14 2021, 10:12 PM

Test Result - Prod

Status: ✅ PASS
Environment: cawiki, hewiki
OS: macOS Big Sur
Browser: Firefox
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Set browser font size to 12px
Make sure legacy vector is turned off
Go to any page on desktop in Firefox 83
Set browser width to ~1000px
✅ AC1: Expected: Sidebar does not overlap content