1539911 - [xul flexbox emulation] Tab bar gets spurious overflows with toolkit.cosmeticAnimations.enabled=true due to min-width/max-width transition

Status: RESOLVED WORKSFORME

(Core :: Layout: Flexbox, defect, P3)

Description

[Brian Grinstead [:bgrins]]

Attachment: tabs-temp-scroll.gif

STR (See attached gif):

• ./mach run --temp-profile --setpref layout.css.emulate-moz-box-with-flex=true
• Open a number of tabs but not enough to overflow
• When it gets close to overflowing, see arrow scrollbuttons show up temporarily and go away while the tab is being added

As best as I can tell:

• We have gBrowser.animationsEnabled set here (can be disabled by flipping toolkit.cosmeticAnimations.enabled=false): https://searchfox.org/mozilla-central/rev/3d469329a42644b41e66944d8da22d78d8c0f5ec/browser/base/content/tabbrowser.js#66
• This allows the tabbrowser to insert the tab before setting [fadein] attribute (this condition https://searchfox.org/mozilla-central/rev/3d469329a42644b41e66944d8da22d78d8c0f5ec/browser/base/content/tabbrowser.js#2599-2604 instead of this one https://searchfox.org/mozilla-central/rev/3d469329a42644b41e66944d8da22d78d8c0f5ec/browser/base/content/tabbrowser.js#2364-2368)
• There's a transition on min-width and max-width: https://searchfox.org/mozilla-central/rev/ddd1679c0534f7ddf36cafddd17b710c4fefe3c4/browser/base/content/browser.css#170
• Something is happening with the animation in CSS flex that's not in XUL flex which is causing overflows to be triggered during the transition.