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

RESOLVED INVALID

Status

()

Firefox
Tabbed Browser
RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: YUKI "Piro" Hiroshi, Unassigned)

Tracking

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
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.
(Reporter)

Comment 1

7 years ago
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

7 years ago
Here, WORKAROUND
.tabbrowser-tab:not([pinned])[fadein] {
  max-width: 250px !important;
  min-width: 100px !important;
}
(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.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → INVALID

Updated

7 years ago
Blocks: 380960
No longer depends on: 380960

Updated

7 years ago
Duplicate of this bug: 586151
You need to log in before you can comment on or make changes to this bug.