Toolbar animations such as the 'Save to Pocket' and 'Stop / Reload' do not work properly outside of the nav-bar




Toolbars and Customization
a year ago
8 months ago


(Reporter: jaws, Unassigned)


(Blocks: 1 bug)

Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [reserve-photon-animation])

Placing the Pocket, Library, or Stop/Reload buttons in the Tabs toolbar causes their associated animations to not run correctly.

The content inside of the buttons that is set to position:absolute does not leave the flow of the document causing the buttons to be wider than they should be. The overflow:hidden property also is not clipping the SVG sprite to the desired width, causing the full SVG sprite to be visible during the animation (the user can see the sprite sliding across the screen).

I compared the different CSS properties of the tabs toolbar and the navigation toolbar and couldn't find what was different and why we would get such a different outcome.

This bug is on file to figure out what is going wrong here, and eventually enable our animations to run outside of the navigation toolbar.
Flags: qe-verify+
Blocks: 1355922
Blocks: 1382898
Priority: -- → P3
QA Contact: jwilliams
Priority: P3 → P4
Comment hidden (obsolete, typo)
Comment hidden (obsolete, typo)
Bug 1384953 should make this easier to fix for the library button animations, but there will still need to be some work to calculate the correct vertical offset.


11 months ago
Duplicate of this bug: 1394082


11 months ago
QA Contact: jwilliams → stefan.georgiev
You need to log in before you can comment on or make changes to this bug.