[BUG] Scrollbar shows even if only 3 rows there
Merci-chao opened this issue · 7 comments
I'm using Firefox 85 on Windows 7.
The max-height of scrollbox counts 1px less for each row, e.g. it requires 3px more for 3 rows to prevent the scrollbar.
This pure CSS solution doesn't have this problem on my side:
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css
The value for the height comes from the value of the CSS variable from Firefox, I don't set any static value there, and I can't seem to replicate the issue on W10.
Can you try adding this line to your multirows file?
.tabbrowser-tab{ height: var(--tab-min-height); }
That's the only thing that should make any difference from the pure CSS version you linked, since the rest is pretty much the same.
I updated multirow with that and removed some unnecesary margin, see if that helps.
Now there is always 1px more overflowing. The selected tab is also 1px more taller than others.
The CSS one doesn't have this problem.
I removed the min-height and height of .tab-background, and removed the min-height of .tabbrowser-tab, the problem fixed.
I tested on an old laptop I had with W7, and the actual problem is that on W7 and W8, Firefox adds a 1px top border on tabs when using any of the default themes (doesn't happen with non-default personas).
Removing the min-height of tab-background can cause other issues, so it's better to just remove those borders on top, or add the px in the scrollbox calculation (but that would cause issues with non-default personas).
I'm not even sure why they added the top border on W7 and W8 but not on any other OS (since default Firefox doesn't use multirow, and by default the border on the top row isn't even notizable...), so I just decided to remove the top borders instead.
Here the updated version.
I think the border-top can help separating the rows visually so I suggest to keep it.
There are no top borders on any other OS, so for the sake of consistency and to solve the issue without more problems I'll leave it like that.
If you want them to better visualize the tabs, you can add this to your userChrome.css to keep borders without affecting multirow:
.tab-background {border-top: 1px solid #333 !important}
(Or any other color you want)