1707472 - Inconsistent right-fading of Proton Tabs for titles near length threshold

Status: NEW

(Firefox :: Tabbed Browser, defect, P3)

Description

[Max Chernoff]

Attachment: Screenshot of inconsistent fading

Tested in Firefox Developer Edition 89.0b3 x64, Windows 10

Tab titles that are too long are faded at the right edge of the tab. Tab titles that fit entirely inside the tab bar are not faded. However, tab titles that are exactly at the threshold length between too long and fitting show some inconsistent behavior, as you can see in Tabs 1 and 2 in the screenshots attached.

Here are the URLs that I used to make the attached screenshot:

1: data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||

2: data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||

3: data:text/html,<meta charset=utf-8><title>.%E2%80%8A.

4: data:text/html,<meta charset=utf-8><title>..

%E2%80%8A is a Hair Space, the thinnest Unicode character that I know of. Tabs 3 and 4 are just there to show the width of a single Hair Space, which is about 2px in the attached screenshot.

Tabs 1 and 2 have the exact same title, except Tab 2's title has a single additional Hair Space. This one Hair Space about 2px long causes 3 characters/10px to become faded to near-invisibility. In addition, I think that the text in Tab 1 is getting way too close to the ×.

chrome://browser/content/tabbrowser.css:81 is the source of the fading. If I remove [textoverflow] from lines 81 and 82, the problem is solved; however I think that this will cause text that completely fits in the tab title to start to incorrectly fade near the right end. I think that the real solution to the problem would be be having the onoverflow event trigger about 0.5em before overflow.

Comment 1

[Hani Yacoub, Desktop QA]

Managed to reproduce this on Windows 10 x64 and on Windows 7 x64. The issue can't be reproducible on macOS 10.15 or on Ubuntu 20.04 x64.

Comment 2

[Max Chernoff]

I was able to reproduce this issue with the latest Firefox Nightly on Ubuntu 21.04 x64, but it required a few more hair spaces since the Ubuntu font seems to have slightly narrower metrics than Segoe UI. You can probably reproduce this on macOS if you vary the number of hair spaces, but I have no way to test so.

Fits on Ubuntu:        data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||
Doesn't Fit on Ubuntu: data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||

Comment 3

[Max Chernoff]

Attachment: Reproduction on Ubuntu 21.04

Comment 4

[Max Chernoff]

Attachment: The issue in various browsers

I've done some more testing, and it doesn't look like this issue is exclusive to Proton. Every version of Firefox and Chrome that I tested had some version of this issue. What has changed, however, is that Proton tabs have zero margin/padding between the × and the tab title, and this seems to make the issue much more visible. I've used Firefox for years and I've never noticed the odd fading before, but I noticed the odd fading behavior on the first day that I received the Proton update, so I'm pretty sure that there's something in Proton making it more prominent. Adding some padding between the × and the tab title may cause the issue to be much harder to notice, even if it doesn't actually solve the problem.

The attached screenshot shows what happens when Firefox 52, Firefox 88, Firefox 90, Chrome 44, and Chrome 92 have tab titles that are barely too long and barely too short. I also tested on Edge 90 and Firefox 60, but they were identical to Chrome 92 and Firefox 88. I'm curious what Safari does in these circumstances, but I don't have any access to a Mac.

I'm also attaching an HTML/JS tester that I used to generate the screenshots in case someone else wants to test without trying to guess the number of hair spaces to copy/paste for each different browser/OS combination.

It looks like this fading feature was first implemented in Firefox 53 by Bug 658467, so maybe there's something in there that can help someone.

Comment 5

[Max Chernoff]

Attachment: Animation showing the fading near the threshold length

Comment 6

[Max Chernoff]

Attachment: Video showing how overlong titles get cut off

Comment 7

[Max Chernoff]

Attachment: Webpage to test the issue with