Page MenuHomePhabricator

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

Description

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

ACStatusDetails
1T270104#6829422

QA Results - Prod

ACStatusDetails
1T270104#6841001

Event Timeline

ovasileva triaged this task as Medium priority.Dec 14 2020, 1:49 PM
ovasileva updated the task description. (Show Details)

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.

@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.

Jdlrobson renamed this task from Sidebar overlays content in Firefox 83 to Sidebar overlays content in Firefox 83 when font-size is set to 12px.Jan 22 2021, 4:28 PM
Jdlrobson updated the task description. (Show Details)

Note overlap on these tabs too:

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?

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

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

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

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

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.

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