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;
 }

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!

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;
 }

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;
 }

order: -1 !important;

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

-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!

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

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

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.

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.

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.

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.