585417 - Tabs cannnot be closed (zombie tabs still there) when max-width is overridden by userChrome.css

Status: RESOLVED INVALID

(Firefox :: Tabbed Browser, defect)

Description

[YUKI "Piro" Hiroshi]

By Bug #380960, closing tabs animation is now available. It finishes closing process of tabs by "transitionend" events from changing of "max-width" property. However, by Bug #574654, we possibly fix "max-width" to our favorite value. When max-width of tabs are fixed by userChrome.css (or third-pirtys' theme, addons ,etc.) transisionend event never fires and zombie tabs are left on the tab bar.

Steps to reproduce:
1. Put following style rules into your userChrome.css:
------------------------------------------
.tabbrowser-tab:not([pinned]) {
  max-width: 250px !important;
  min-width: 100px !important;
}
------------------------------------------
2. Start firefox and open new tabs.
3. Close a tab.

Expected result: The tab disappears.
Actual result: The tab is still there, and cannot be closed.

Comment 1

[YUKI "Piro" Hiroshi]

By the way I discover another problem while I'm debugging my addon including custom animations for each tab. I added some lines for the changes from Bug #380960, like:

------------------------------------------
.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
  .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) {
    -moz-transition: margin-top 0.15s ease-out,
                     opacity 0.15s ease-out,
                     margin-right 0.2s ease-out,
                     min-height 0.15s ease-out,
                     max-height 0.15s ease-out,
                     min-width 0.15s ease-out /* this is added */,
                     max-width 0.15s ease-out /* this is added */;
    transition: margin-top 0.15s ease-out,
                opacity 0.15s ease-out,
                margin-right 0.2s ease-out,
                min-height 0.15s ease-out,
                max-height 0.15s ease-out,
                min-width 0.15s ease-out /* this is added */,
                max-width 0.15s ease-out /* this is added */;
}
------------------------------------------

This usually works well, but sometimes fails, because "transitionend" event for "max-width" isn't fired if another property (opacity, min-height, max-height on this sample) finishes its change at the same time.

Comment 2

[Alice0775 White]

Here, WORKAROUND
.tabbrowser-tab:not([pinned])[fadein] {
  max-width: 250px !important;
  min-width: 100px !important;
}

Comment 3

[Dão Gottwald [::dao]]

(In reply to comment #2)
> Here, WORKAROUND
> .tabbrowser-tab:not([pinned])[fadein] {
>   max-width: 250px !important;
>   min-width: 100px !important;
> }

This isn't a workaround but actually the correct selector. See bug 574654 comment 10.