A very thin line has reappeared under the Active Tab in Firefox 123.0 when using CSS to create ‘connected tabs’ (i.e. no boundary between Active Tab and the Nav Bar).
This line had previously been removed in my own CSS styling by using your suggested fix in r/FirefoxCSS topic ‘Connected tabs - Proton Tabs Tweaks’…“That’s probably solved by simply adding .tabbrowser-tab[selected]{ position: relative; z-index: 1 }” … however, this fix no longer works in Fx123.0… and not obvious what has changed from my efforts with the Browser Toolbox?
A hint of the problem had reappeared in Fx122… in which, when the browser window did not have focus, the Tab Bar darkened AND a thin line appeared under the active tab… until window focus was restored.
(EDIT - The reappeared Active Tab underline problem only existed if using the ‘out-of-date’ 25Oct23 version of MrOtherGuy’s ‘non_floating_sharp_tabs.css’ style… the problem had already been fixed… and is NOT present in the current 24Jan24 version.)
The attached image shows the same problem also exists in your ‘non_floating_sharp_tabs.css’ AFAICS? The LH image is Firefox 123.0 + RH image of LibreWolf 122.0.1-2. (Both browser windows have focus. Both images of clean test profiles on Win10 with only your latest ‘non_floating_sharp_tabs.css’ style and the Gradient Blue theme added. The UI size has been increased by setting pref ‘layout.css.devPixelsPerPx’ = 2.5 to improve the image clarity o the two toolbars.)
@MrOtherGuy: Thanks for your reply and testing. :)
Don’t understand why the underline ‘artifact’ won’t reproduce for you? The 2 images attached are without any of my own CSS and are just “clean test profiles on Win10 with only your latest ‘non_floating_sharp_tabs.css’ style and the Gradient Blue theme added.”
Thus, unless the ‘underline’ in Fx123.0 is somehow being created by some conflict with the setting(s) within the Gradient Blue theme itself… I can’t see what could be causing the problem?
Will test again with new clean profiles just to be sure I can reproduce too! And then try your ‘non_floating_sharp_tabs.css’ style with Firefox’s default themes and a random selection of other AMO toolbar themes.
(FWIW - The Gradient Blue toolbar theme is one of the older ones and IIRC from looking at its coding a couple of years ago it is written in a slightly different format to the way a toolbar theme would be created using the latest version of Firefox Color.)
Yeah, I created a new profile in Firefox 123 and installed the Gradient Blue theme you linked. I then made Firefox to load userChrome.css by flipping the pref created userChrome.css with contents of non_floating_sharp_tabs.css and this is the result:
So, I would be interested to know what makes a difference here where on my system no line is seen below selected tab (as intended) but on your system apparently there is a line.
I just noticed that the link you have for non_floating_sharp_tabs.css points to a for 4months old revision of that file, not the latest.
Apologies… thought I’d linked and used latest version of your non_floating_sharp_tabs.css … seems not… my bad… not sure how that happened… sigh! :(
Notes on underlying cause/code changes. The only change made to the non_floating_sharp_tabs.css style between the ‘wrong/out-of-date’ 25Oct23 version incorrectly used and linked (above) and the current version is this Commit on 24Jan24: https://github.com/MrOtherGuy/firefox-csshacks/commit/a2b52b6da07f009e872aee124adf932a88c8f483.
This resulted from ‘Issue #335 - non_floating_sharp_tabs line when unfocused’ posted by corobin on 24Jan24… which links to ‘Remove opacity changes from titlebar - fixes #331’ which explains the underlying cause is the code change in Bug 1870803.