Sorry for hijacking the thread, but I think that my post will be on topic.
There is something wrong going on with the tabs spacing, and it is not (o at least not just) the width of the borders.
Pale Moon is quickly becoming obsolete, and I'm in the process of switching to Vivaldi. I'm sure I'm at the right place because I've found here names like @Pesala and @srazzano which I remember from the days of the Custom Buttons FF extension. Some of their code is still working fine in my PM installation.
Anyway, I started to arrange Vivaldi to my liking. First thing I did was getting the Tabs Below Address Bar and Bookmark Bar mod by @nomadic and this tabs issue showed up very soon. I did just a few minor height and position changes to the toolbars and started styling the tabs giving a 1 px outline to the tabs and moving them 1 px to the left, so the right border of a tab is covered by the border of the next and I see just 1 border. Then I had tab transparency enabled, and the tab spacing issue was blatant because moving 1 px to the left the tabs covered the right border of some tabs, but not of all of them, as it would happen if tab spacing was uniform and working correctly.
I "fixed" it first it by disabling tab transparency and then changing the 1px outline for just 1px left border. But then came the tab stacks.
I aimed (and aim) at something like this:
tab-stack-nice.png
But then opening new tabs or closing existing tabs caused this:
tab-stack-2.png
The tab itself and the tab stacks (classes .tab and .tab-group-indicator respectively) are both direct children of .tab.position, which, you've guessed it, sets the tab position in the bar. Actually, tabs with house stacks receive also the class .tab-group, but there is nothing special in its style that I had found and the issue I am trying to explain is present also in a tab bar full of tabs with no tab stacks.
I double-checked that both .tab and .tab-group-indicator inherited width and position properties from their parent .tab position and placed this in mycustom css:
.tab-strip .tab-position { outline: 1px solid red; }
The result is that I see this:
tab-stack-outline-1.png
But then I open a new tab (or close an existing one) and Vivaldi does this, which is what I expect to see because I moved every tab 1 px to the left to cover the border of the tab at its left:
tab-stack-outline-2.png
Both captures come from the same browsing session with the same css code and a maximized window.
For some reason, there are different gaps between tabs depending on the number of tabs opened, but it is always that 1px difference, so tabs are correctly spaced of wrongly spaced just randomly. To try to track the root of the issue, I added a 1px blue border to .tab and moved it 1px to the right. With the aforementioned 1px red .tab-position outline, the result is this:
tab-mess.png
If all tabs had the same separation, then every tab would show the pattern 1px blue + 1px red as the result of the blue 1px .tab right border and the 1px .tab-position outline. There are some tabs that show indeed, as expected, that pattern, but then there is an additional 1 px space between other tabs whose root I've failed to identify. After the first tab there is a gap of not 1 but 2 pixels. That's because there lies .toolbar-large, which houses the .tab-strip on which the .tab-position elements are (after a .resize and a span), the new tab button and the element where the synced tabs and the trash buttons lie, whose class I don't remember right now. Here it is with a 1px yellow outline:
toolbar-large-yellow.png
The most disturbing thing is that the presence of such ghost pixel between tabs seems to be totally random. I've even built a spreadsheet where I put the width of #tabs-container and .tab-strip, number of tabs, their width and their position from 1 to 60-something tabs opened and performed lots of operations with such figures in order to find a pattern, but I've been unable to find something meaningful other than the fact that I could always make the tabs look evenly spaced by adding 0.8 or 0.9 (randomly, again) to the width of .tab-position
I've seen this issue in captures throughout the forum that seem to date back to forever. It would be nice to know where does it come from.
