My Tab Bar Moves Around Now When Closing Tabs

User Help for Mozilla Firefox
Posts: 71
Joined: May 11th, 2009, 6:22 am

Post Posted June 7th, 2021, 9:12 am

i use a code after 89 to make the tabs connected again and not rounded. but when closing tabs the tab bar moves around. only when theres so many tabs its at the end of the tab bar. just a sudden it moves, looks bigger, then moves back. could someone help me with it. i made a vid to show what it does

Code: Select all
/* Source file made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions. */

/* It's not strictly a requirement, but this style expects  compact_proton.css to be loaded before it. */

  --proton-tab-block-margin: 0px !important;
  --tab-block-margin: 0px !important;
  --tabs-shadow-size: 1px !important;
  /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color  */
  --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
  /* Uncomment next line to force specific color for tab top line */
  /* --tab-line-color: blue !important; */

/* This sets a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
  --tabs-border-color: color-mix(in srgb, currentcolor 30%, transparent) !important;

/* This overrides value in compact_proton.css */
  box-shadow: 0 -1px 0 0 var(--tabs-border-color) !important;

  --toolbarbutton-inner-padding: 7px !important;
  --toolbar-bgcolor: transparent;

#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important;  }

/* tabs newtab button needs some special styling... */
#tabs-newtab-button{ padding-inline: 0 !important; }
#tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
  border-radius: 0 !important;
  width: initial !important;
  height: initial !important;
  padding: 9px !important;
:root[uidensity="compact"] #tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
  padding: 7px !important;

#scrollbutton-down{ border-radius: 0 !important; border-width: 0 !important; padding-inline: 3px !important; }

/* tab shaping */
.tabbrowser-tab{ padding-inline: 0 !important; }

#tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{ min-height: calc(var(--tab-min-height) + 2px) !important; }

.tab-content[pinned]{ padding-inline: 11px !important; }

  border-radius: 0 !important;
  box-shadow: none !important;
  border-inline: 1px solid var(--tabs-border-color) !important;

.tab-stack:hover > .tab-background::before{
  background-color: inherit;
.tab-stack > .tab-background[selected]::before{
  background-color: highlight;
  background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color));
/* Photon-like tab on hover animation for the top line */
@keyframes tab-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
.tab-background::before{ animation: tab-line-anim 160ms }

/* Disable animation for selected and pinned tabs */
.tabbrowser-tab[pinned] > .tab-stack > .tab-background::before,
.tab-background[selected]{ animation: none }

/* moves context-line to the bottom */
.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; }
Last edited by tunescool on June 7th, 2021, 10:48 am, edited 1 time in total.


User avatar
Posts: 11396
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted June 8th, 2021, 2:03 pm

I suggest asking the author of the CSS. Either you can file an issue there on his Github, or he hangs out on

Posts: 71
Joined: May 11th, 2009, 6:22 am

Post Posted June 9th, 2021, 8:36 am

move to top

Return to Firefox Support

Who is online

Users browsing this forum: No registered users and 9 guests