This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Close Tab Button On Left (Firefox 113)

  • 12 replies
  • 2 have this problem
  • 1 view
  • Last reply by rob196

more options

This again!

This was resolved about a year ago; now the problem is back, as of updating to Firefox 113.0.1 this evening.

Initially post-update the close tab button was in a weird, random place on the tab bar. I have adjusted the margins to put the button back where it's supposed to be!

I changed :

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

to:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 35px !important;
}

to move the button back onto the left. That may seem like a drastic change but that's the lowest value I could find which produced the result I want.

However, it's not quite the result I want! As of updating to 113.0.1, the tab title itself now disappears altogether on hover.

I have tried to correct this in CSS using the .tab-text and .tab-label attributes, but without any luck so far.

Can anybody help me with this, before I'm forced to downgrade to Firefox 112?

Better yet... how about we just make this an option in Settings, as it should be?!

This again! This was [https://support.mozilla.org/bm/questions/1365405 resolved about a year ago]; now the problem is back, as of updating to Firefox 113.0.1 this evening. Initially post-update the close tab button was in a weird, random place on the tab bar. I have adjusted the margins to put the button back where it's supposed to be! I changed : <pre> .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } to: .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 35px !important; } </pre> to move the button back onto the left. That may seem like a drastic change but that's the lowest value I could find which produced the result I want. However, it's ''not'' quite the result I want! As of updating to 113.0.1, the tab title itself now disappears altogether on hover. I have tried to correct this in CSS using the .tab-text and .tab-label attributes, but without any luck so far. Can anybody help me with this, before I'm forced to downgrade to Firefox 112? Better yet... how about we just make this an option in Settings, ''as it should be''?!

Modified by Kit Marsden

Chosen solution

jscher2000 - Support Volunteer said

Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group. There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409
 .tabbrowser-tab .tab-close-button {
   opacity: 0;
   margin-left: -4.5px !important;
   margin-right: 2px !important;
 }
 .tabbrowser-tab:not(:hover) .tab-close-button {
   display:none;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
   opacity: 1;
   margin-inline-end: 0;
   /* OLD CODE before Fx113:
   -moz-box-ordinal-group: 0 !important;
   NEW CODE for Fx113: */
   order:-1 !important;
   display:unset !important;
 }
  .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
   display: none;
 }

Thank you! That seems to have done it!

Read this answer in context 👍 0

All Replies (12)

more options

Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group.

There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409

 .tabbrowser-tab .tab-close-button {
   opacity: 0;
   margin-left: -4.5px !important;
   margin-right: 2px !important;
 }
 .tabbrowser-tab:not(:hover) .tab-close-button {
   display:none;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
   opacity: 1;
   margin-inline-end: 0;
   /* OLD CODE before Fx113:
   -moz-box-ordinal-group: 0 !important;
   NEW CODE for Fx113: */
   order:-1 !important;
   display:unset !important;
 }
  .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
   display: none;
 }

Modified by jscher2000 - Support Volunteer

more options

Chosen Solution

jscher2000 - Support Volunteer said

Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group. There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409
 .tabbrowser-tab .tab-close-button {
   opacity: 0;
   margin-left: -4.5px !important;
   margin-right: 2px !important;
 }
 .tabbrowser-tab:not(:hover) .tab-close-button {
   display:none;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
   opacity: 1;
   margin-inline-end: 0;
   /* OLD CODE before Fx113:
   -moz-box-ordinal-group: 0 !important;
   NEW CODE for Fx113: */
   order:-1 !important;
   display:unset !important;
 }
  .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
   display: none;
 }

Thank you! That seems to have done it!

more options

Note that there is still this code with -moz-box-ordinal-group in the above posted code.

  .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }

more options

cor-el said

Note that there is still this code with -moz-box-ordinal-group in the above posted code.
  .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }

Thank you. Presumably I should replace that with
order: -1 !important;
as well, then?

Modified by Kit Marsden

more options

-moz-box-ordinal-group: 99999 places some icons at the far right and that can be done by order: 99999 (so simply replace -moz-box-ordinal-group with order).

Do you know or remember where other icons like the busy throbber were placed as I'm not sure why you would want to place those icons at the far right ?


Note: '-moz-box-ordinal-group' is by default 1 when not specified. 'order' starts at 0 and is usually the value of -moz-box-ordinal-group minus 1.

Modified by cor-el

more options

cor-el said

-moz-box-ordinal-group: 99999 places some icons at the far right and that can be done by order: 99999 (so simply replace -moz-box-ordinal-group with order). Do you know or remember where other icons like the busy throbber were placed as I'm not sure why you would want to place those icons at the far right ?

Note: '-moz-box-ordinal-group' is by default 1 when not specified. 'order' starts at 0 and is usually the value of -moz-box-ordinal-group minus 1.

Honestly? I don't know. I think when I asked or advice on this last January, this was part of the code which was recommended to me – which worked exactly as I wanted up until last week! – so I didn't really interrogate it further. However, I'm not aware of any icons appearing far right.

A quick bit of background on what I'm sure some people consider to be an odd little crusade...

I've worked on Macs for years, like a lot of people in the music industry. I currently own six Macs of different types, three of which I regularly use for work. I also do some work in Windows (via BootCamp on one of my MacBooks), for one or two very specific applications (ie. running timecoded lighting cues synced to tracks onstage, for live shows with certain bands/artists).

The point is that my instinct is to reach for a 'Close' button in the top left – where Mac operating systems have always had it. I feel that the Close Tab buttons in my browser should be consistent with the overall design of the operating system; this is best for workflow, and it is also best for my brain not exploding due to something suddenly being different for no reason.

On Windows, it makes sense for the Close Tab button to be on the right, consistent with the operating system. On Mac, it should obviously be on the left.

I can't understand why Firefox doesn't simply include an option in the Settings to 'Follow System' for these sort of things – similar to how you can set the Light Mode or Dark Mode option to 'Automatic' (ie. to fall in line with the global settings of your machine, for the sake of consistency).

I love the Firefox is open source and can be customised. But this is far from the best or more convenient solution to a UX issue of this type. And as we have seen, having long-standing customisations like this broken by a software update with no warning can be extremely disruptive, when you open your browser and suddenly things are no longer where you are used to them being!

more options

Would that close button appear at the far left (i.e. to the left of the favicon and the busy/loading throbber and other icons like you see when playing video/audio) ?

more options

Do you have other code with a -moz-box-ordinal-group property in your userChrome.css ?

more options

cor-el said

Would that close button appear at the far left (i.e. to the left of the favicon and the busy/loading throbber and other icons like you see when playing video/audio) ?

The close button replaces the favicon on the left, when you hover on each tab. It looks like this.

more options

Yes, that is what your current code is doing. I'm not sure whether previously the favicon stayed visible, but now you do not get changes to the text label if both have the same width.

more options

cor-el said

Yes, that is what your current code is doing. I'm not sure whether previously the favicon stayed visible, but now you do not get changes to the text label if both have the same width.

No, this is how it's always looked; I have just put it back to exactly how it looked before updating to Firefox 113.

more options

I am continually frustrated by software that doesn't respect the platform. Software ports from Windows are the most egregious. Wake up Mozilla, or you will disappear into irrelevance. This issue is easily solved by the blindingly obvious: a setting for close button position.

Modified by rob196