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.)

  • ResurgamS13@fedia.ioOP
    link
    fedilink
    arrow-up
    1
    ·
    edit-2
    9 months ago

    @hansman: Thanks for replies and CSS suggestions… will try those later today. :)

    As in my reply to MrOtherGuy… none of my own CSS in use or even present in the two clean profiles used to create the 2 images… both new ‘out-of-the-box profiles’ of Firefox 123.0 and LibreWolf 122.0.1-2… with just MrOtherGuy’s ‘non_floating_sharp_tabs.css’ style and NH0jNG’s Gradient Blue theme (which I’ve used for years) added… nothing else.

    Which to my logic, if not a code change in Fx123.0… that leaves the only possibility being some conflict, since Fx123.0 was released, with some aspect of the settings within the Gradient Blue theme?

    • hansman@fedia.io
      link
      fedilink
      arrow-up
      1
      ·
      edit-2
      9 months ago

      Well, have you tried the code?

      It might interfere with the css style, which is creating its own navbar shadow, but that might be (partially?) overriden by current Fx versions anyways. The issue has been discussed in a couple of other forums, seems like the code for that shadow has changed recently.

      Again, maybe give this a shot, which has worked for some other users; to be safe put it at the bottom of your userChrome.css, shouldn’t matter though:

      #nav-bar:-moz-lwtheme {
         box-shadow: none !important;
      }
      
      
      • ResurgamS13@fedia.ioOP
        link
        fedilink
        arrow-up
        1
        ·
        edit-2
        9 months ago

        @hansman: Yes… just tested your code posted above ( #nav-bar:-moz-lwtheme { box-shadow: none !important; } ). It works! Hurrahs and BZ! (Bravo Zulu). :D

        So the reappeared underline is caused by some Tab Bar coding change in Fx123.0 Re: Active Tab shadow.

        Code successfully removes the new ‘Active Tab underline effect’ in both my own custom CSS profile… AND with the example used in this thread… i.e. a clean profile with just MrOtherGuy’s ‘non_floating_sharp_tabs.css’ style and NH0jNG’s Gradient Blue toolbar theme added… see new image of that combination in a Fx123.0 test profile attached below… properly ‘connected tabs’ re-established. :)

        PS. Would be interested to find and read comments where this problem mentioned elsewhere Re: your comment “The issue has been discussed in a couple of other forums, seems like the code for that shadow has changed recently.”

        Image. Fx123.0 test profile (non_floating_sharp_tabs.css + Gradient Blue toolbar theme) with hansman’s fix:

        • hansman@fedia.io
          link
          fedilink
          arrow-up
          1
          ·
          9 months ago

          Glad it’s working!

          As for discussions on it, I’ve linked to a couple in my first reply, and there’s one in a German forum.

          Credit for the solution goes to this poster; the related Fx code might be this one.