Tab label's fadeout effect jumps to the left, when hovered
Categories
(Firefox :: Tabbed Browser, defect)
Tracking
()
People
(Reporter: dholbert, Unassigned)
Details
Attachments
(2 files)
STR:
- Ensure you have Proton enabled (
browser.proton.enabled
=true
, the default in Nightly) - Open a tab with a long title (long enough that some of it fades out & is clipped), e.g.:
data:text/html,<title>This is a long tab title so that it triggers the fadeout effect
- While viewing that tab, hover its tab-title.
ACTUAL RESULTS:
The tab-title seems to change one thing (and only one thing) when hovered: the fadeout effect jumps leftwards a bit. See attached screencast.
EXPECTED RESULTS:
Fadeout threshold shouldn't move.
(Under the hood, it looks like in fact the label itself gets skinnier, though you can't really tell since its right edge is fully transparent. So it ends up looking like the fadeout point is just jumping, which looks quite odd.)
I'm using latest Nightly on macOS.
Reporter | ||
Updated•4 years ago
|
Reporter | ||
Comment 1•4 years ago
|
||
Here's a screenshot with the Browser Toolbox open, and with a red border added on the label (specifically on the element with class="tab-label-container proton"
). As you can see in this screencast, the width of that element literally changes when you hover/unhover it.
Reporter | ||
Comment 2•4 years ago
•
|
||
It looks like the problem here is actually that the close button (<image class="tab-close-button close-icon">
) gets wider when you hover the tab title. (The close-button's bounds aren't directly visible, so you can only see it getting wider via this indirect effect on the neighbor label).
Specifically, this is the problematic rule that's causing this bug:
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 0;
width: 19px;
When the tab-title is not hovered, this CSS rule applies, and the close button is 19px wide.
When the tab-title is hovered, this CSS rule stops applying, and another declaration takes over to set width: 24px
, which is 5px wider. This results in the label getting 5px skinnier, since they have to share space.
Reporter | ||
Comment 3•4 years ago
|
||
That CSS rule lives here:
https://searchfox.org/mozilla-central/rev/26ac39c8d5e3c4b93e3519be7302e15ae42e9833/browser/themes/shared/tabs.inc.css#531-534
and seems to have been added in bug 1695140... which (aha!) already has a regression filed, which this seems to be a duplicate of.
Description
•