Tab titles and close button missing (Firefox 72)
I had an update to Firefox 72 today which required messing around with the Chrome.css code again to get my tabs back below the searchbar. I followed the advice on this page: https://support.mozilla.org/en-US/questions/1274416?page=2 , but the format of the tabs is now a complete mess. As the image below shows, text is set awkwardly below the page icon rather than in-line, or set below view if it's over a certain length. The closs button is also set slightly above, rather than in-line with text and is missing altogether depending on the length of text. This is also the case when I remove the .CSS code to reset the tabs to above the searchbar. Any help would be much appreciated.
Wót OrangeMelon změnjony
Wšykne wótegrona (5)
You probably have other code in userChrome.css that is causing this issue. From the screenshot it may seem that the title is push down and thus appears below the Tab bar and is not visible.
Do you have other code that deals with the tab bar or text in individual tabs?
Hi Cor-el!
This is the full code I'm using:
/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
#TabsToolbar {
display: block !important; /*required for 71+*/
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}
/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}
I'm no expert in userChrome.css and have mostly done what others have suggested, coupled with a bit of trail and error (read - I don't know what I'm doing!)
Wót cor-el změnjony
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
This code probably won't work properly because shadow DOM is used for the tabs (you can't cross a shadow DOM barrier).
You can try this code (not tested):
#tabbrowser-tabs,
.tabbrowser-arrowscrollbox,
.tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
Much appreciated, but sadly no better. It seems odd that the problem persists even when I remove all userChrome.css code and revert back to tabs on top.
You can start Firefox in Safe Mode to check if one of the extensions ("3-bar" menu button or Tools -> Add-ons -> Extensions) or if hardware acceleration is causing the problem.
- switch to the DEFAULT theme: "3-bar" menu button or Tools -> Add-ons -> Themes
- do NOT click the "Refresh Firefox" button on the Safe Mode start window
- https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode
- https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems
You can also try different Density settings in customize mode.