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)
Wed, Jan 22, 2:54 PM
Unknown Object (File)
Tue, Jan 21, 9:28 AM
Unknown Object (File)
Fri, Jan 17, 7:39 AM
Unknown Object (File)
Tue, Jan 14, 3:13 AM
Unknown Object (File)
Mon, Jan 13, 1:59 AM
Unknown Object (File)
Sat, Dec 28, 7:25 AM
Unknown Object (File)
Dec 23 2024, 12:23 PM
Unknown Object (File)
Dec 22 2024, 7:31 AM
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.