Page MenuHomePhabricator

Fix a "flickering" behavior with the menu bar transition animations in Chrome
ClosedPublic

Authored by epriestley on Apr 17 2020, 12:47 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Dec 22, 7:31 AM
Unknown Object (File)
Sat, Dec 21, 8:20 PM
Unknown Object (File)
Fri, Dec 20, 7:27 PM
Unknown Object (File)
Sun, Dec 15, 3:05 PM
Unknown Object (File)
Wed, Dec 11, 7:12 AM
Unknown Object (File)
Tue, Dec 3, 7:11 AM
Unknown Object (File)
Thu, Nov 28, 3:13 PM
Unknown Object (File)
Wed, Nov 27, 8:41 PM
Subscribers
None

Details

Summary

Fixes T13508. The "Notification" and "Messages" icons in the menu bar have a CSS transition animation on hover.

In Chrome, when this element moves up 2px, you can get a flicker in and out of the hover state if the user's cursor is at the very bottom of the element, since the bounding box for the element is rapidly sliding in and out of the area under the cursor.

To fix this: as we move the element up, also make it taller.

Test Plan

In Safari, Chrome, and Firefox: put my cursor at the very bottom of the element, no longer saw any animation flickering.

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

This revision was not accepted when it landed; it landed in state Needs Review.Apr 17 2020, 1:03 PM
This revision was automatically updated to reflect the committed changes.