Bug 1769487 - Prevent overflow during the start/end of the tab open/close animation. r=Gijs
authorEmilio Cobos Álvarez <emilio@crisal.io>
Mon, 23 May 2022 10:52:43 +0000
changeset 618531 a703c001c31e6b9d88924318292975dd45c13a80
parent 618530 a520a5c1a007e898aca68385b8517c28a92649a0
child 618532 c957d9e0d9fc155122dd12aa1d58dca8b2012d32
push id163314
push userealvarez@mozilla.com
push dateMon, 23 May 2022 11:04:17 +0000
treeherderautoland@a703c001c31e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1769487
milestone102.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1769487 - Prevent overflow during the start/end of the tab open/close animation. r=Gijs This prevents the overflow button and such from getting unexpectedly shown mid-animation. With -moz-box-pack: start it doesn't look visibly worse, afaict. Differential Revision: https://phabricator.services.mozilla.com/D146434
browser/themes/shared/tabs.css
--- a/browser/themes/shared/tabs.css
+++ b/browser/themes/shared/tabs.css
@@ -93,16 +93,20 @@
   border-width: 0;
   margin: 0;
   padding: 0 2px;
   -moz-box-align: stretch;
   /* Needed so that overflowing content overflows towards the end rather than
      getting centered. That prevents tab opening animation from looking off at
      the start, see bug 1759221. */
   -moz-box-pack: start;
+  overflow: clip;
+  /* Needed to avoid clipping the tab-background shadow, which has a 4px blur
+   * (we only have 2px padding in the inline direction) */
+  overflow-clip-margin: 2px;
   min-height: var(--tab-min-height);
 }
 
 /* tabbrowser-tab keyboard focus */
 .keyboard-focused-tab > .tab-stack > .tab-background,
 .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-inset);