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@lemmy.worldM
    2·
    9 months ago

    Yes, this is essentially an issue about how toolbars are layered. Many themes have some background image behind the whole toolbars area (or toolbox), and then have semi-transparent background color for the main toolbar from which the image is seen through.

    To make selected tab look like it is connected to the toolbar below it must use that same semi-transparent background. BUT, if there is also a line separating the toolbars (implemented as box-shadow on nav-bar), then that line needs to be covered somehow. Built-in themes, with the exception of Alpenglow, all have fully opaque toolbar background-colors so there is no issue, the opaque selected tab can just cover it and all is well.

    So selected tab needs to have some opaque background, but to make it fit I’ve chosen to make it have bunch of background-images positioned such they are (most of the time) indistiguishable from the toolbox background image(s). In short, selected tab also uses the same background-image as the toolbox.

    But starting with 122 the titlebar has opacity and will-change properties with values that cause it (as well as tabs toolbar within it) that change how all these layers are stacked on top of each other.

    The end result is that box-shadow of nav-bar gets drawn over selected tab, whereas what we want is to draw the selectsd tab with all its background-images over the box-shadow. Either that, or the clipping of the opaque background-images of selected tab doesn’t actually cover the whole tab and thus the box-shadow is again seen through one of the non-opaque background-images.