Bug 615556 - Prevent tabs from overlapping during the close animation. r=dao, a=beltzner

browser/base/content/browser.css

@@ -40,7 +40,7 @@ tabbrowser {
   opacity: 0 !important;
   -moz-transition: min-width 200ms ease-out,
                    max-width 250ms ease-out,
-                   opacity 50ms ease-out 180ms /* hide the tab for the last 20ms of the max-width transition */;
+                   opacity 50ms ease-out 100ms /* hide the tab for the last 100ms of the max-width transition */;
 }
 
 .tab-throbber:not([fadein]):not([pinned]),

browser/themes/pinstripe/browser/browser.css

@@ -1505,6 +1505,14 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   opacity: .8;
 }
 
+/* Prevent overlapping of tabs during the close animation */
+.tab-label:not([fadein]):not([pinned]) {
+  margin-left: -16px;
+  margin-right: -16px;
+  -moz-transition: opacity 100ms ease-out,
+                   margin 30ms ease-out 80ms;
+}
+
 .tab-stack {
   /* ensure stable tab height with and without toolbarbuttons on the tab bar */
   height: 26px;