1734128 - Tab border thicker on 2 sides then on the other 2

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, defect, P1)

Description

[Markus Jaritz [:designakt] (UX)]

Attachment: Tab border on Windows 10 at 150% UI scale

As the attachment shows the border around a tab is thicker on the bottom and right, and thinner on the top and left side.

This shows on Windows 10 if UI is scaled to 150% - which is Windows default for my display. (Not sure how frequent that is the case across all Windows devices - I don't think we have telemetry on that scale)

This issue does not show on 100% or 200% UI scale, nor does it show on Mac no matter what scale is used there. In all those instances the border has the same thickness all around.

Comment 1

[:Gijs (he/him)]

This specifically affects the tabstrip so I think tabbed browser is the right component.

:harry, could we add a set of Windows-only media queries setting the border width to the CSS equivalent of 1 or 2 device pixels, to avoid this issue? (Like the stuff from https://searchfox.org/mozilla-central/rev/9bc5dcea99c59dc18eae0de7064131aa20cfbb66/browser/themes/windows/browser-aero.css#141 onwards )

Comment 2

[Harry Twyford]

[Tracking Requested - why for this release]:
The active tab looks ugly in Windows 10. This is a pre-existing issue, but many more users will see it with the new themes.

Comment 3

[Amy Churchwell [:amy]]

Hi all. Unfortunately, I can't seem to reproduce this issue using Windows 10 on VMware Fusion for some reason. Wanting to flag this as at risk, but will continue investigating.

Comment 4

[Romain Testard [:RT]]

I also cannot reproduce @150%DPI. Markus what is your resolution please?

Comment 5

[:Gijs (he/him)]

I can reproduce on my main machine, running Windows 10 at 150% zoom (which is what Markus also said in comment 0).

Note that this will depend on device pixel rounding done by layout. When I resize a window to make it smaller, or create more tabs, and then cycle through tabs with ctrl-tab, some tabs get a thicker right-hand border and some don't, and although for me, all tabs have a thicker bottom border, I imagine that that, too, might depend on specifics.

The simplest way to see the problem, I suspect, is to open a handful of tabs (3-5 will do) so they just fill a non-maximized window without overflow, and then horizontally resizing the window, squishing and/or enlarging the tabs by doing so. You can then see the tab border swapping between being thick and thin, depending on the exact window width.

Amy, does that help with reproducing this? Depending on your vmware setup, it may or may not be easier to repro at 125% or 175%.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Changing the priority to p1 as the bug is tracked by a release manager for the current beta.
See What Do You Triage for more information

Comment 7

[Markus Jaritz [:designakt] (UX)]

Attachment: Tab border on Windows 10 at 150% UI scale - resizing window

My Display resolution is 3840x2160px
at a Display Scale of 150%

Here is what it looks animated as Gijs described.

Also, I noticed that if I set the spread-radius of the box-shadow that creates this border to 1.3px (over 1px) this effect disappears. Seems more like a hack but maybe it can help. (I have not seen this negatively impact appearance at 100% or 175% scale)

Comment 8

[Amy Churchwell [:amy]]

Thanks for your help! I've been able to reproduce this issue, but, unfortunately, Markus's spread-radius fix does not work for me. Not sure why.[1]

https://searchfox.org/mozilla-central/source/browser/themes/shared/tabs.inc.css#563-568

Some things that seem to help but don't fix the issue entirely:

• addition of inset seems to sharpen things.
• use of outline or border and using thin for border-width. ex: outline: thin solid var(--tabs-border-color) — my thinking was that because the CSS spec does not define a hard value for thin/medium/thick that perhaps scaling would be more forgiving.

I have a hunch that something about box-shadow is not playing nicely with the zoom, but I am not sure.

[1] Happy to write a patch for the 1.3px suggestion if that works for others and chalk it up to a VMware fusion hiccup, also.

Comment 9

[Amy Churchwell [:amy]]

Attachment: Bug 1734128 - Tab border irregular when scaled on Windows 10. r?dao

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:dao, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f8ed785eea6d
Tab border irregular when scaled on Windows 10. r=desktop-theme-reviewers,dao

Comment 12

[Amy Churchwell [:amy]]

Comment on attachment 9245815 [details]
Bug 1734128 - Tab border irregular when scaled on Windows 10. r?dao

Beta/Release Uplift Approval Request

• User impact if declined: Windows users who scale their display see uneven tab outlines.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): CSS-only change.
• String changes made/needed:

Comment 13

[Marian-Vasile Laza]

Backed out changeset f8ed785eea6d (Bug 1734128) for causing bc failures on browser_ext_themes_tab_line.js.
Backout link
Push with failures
Failure Log

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9245815 [details]
Bug 1734128 - Tab border irregular when scaled on Windows 10. r?dao

We're building the RC for Fx94 today. This will have to ride the trains when it's ready.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/02724ee795e9
Tab border irregular when scaled on Windows 10. r=desktop-theme-reviewers,dao

Comment 16

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/02724ee795e9

Comment 17

[Pascal Chevrel:pascalc]

Amy, is that something we would uplift to 95 beta or can it ride the 96 train? Thanks.

Comment 18

[Mehmet]

Hello, could it be that this change has caused the regression reported in bug 1740788 ?

Comment 19

[Amy Churchwell [:amy]]

(In reply to Pascal Chevrel:pascalc from comment #17)

Amy, is that something we would uplift to 95 beta or can it ride the 96 train? Thanks.

Hi Pascal, this can ride the 96 train. Thanks!

Comment 20

[Monica Chiorean]

I was able to reproduce the issue on Win10 using 95.0a1 (20211005215418) and verified as fixed on Win10 builds 96.0b2 and 97.0a1 (20211207155117).

Comment 21

[Monica Chiorean]

Attachment: Screenshot.png