revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-26 00:32:42 +01:00
Code Issues Releases Wiki Activity

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

Browse source 
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.

Maniphest Tasks: T13508

Differential Revision: https://secure.phabricator.com/D21133
This commit is contained in:
epriestley 2020-04-17 05:45:03 -07:00
parent 3e676bce9e
commit 925d2b051c
2 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/celerity/map.php
View file

@ -9,7 +9,7 @@ return array(
'names' => array(
'conpherence.pkg.css' => '3c8a0668',
'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => '7ef29af5',
'core.pkg.css' => '86f155f9',
'core.pkg.js' => '705aec2c',
'differential.pkg.css' => '607c84be',
'differential.pkg.js' => '1b97518d',
@ -37,7 +37,7 @@ return array(
'rsrc/css/aphront/typeahead.css' => '8779483d',
'rsrc/css/application/almanac/almanac.css' => '2e050f4f',
'rsrc/css/application/auth/auth.css' => 'c2f23d74',
'rsrc/css/application/base/main-menu-view.css' => '17b71bbc',
'rsrc/css/application/base/main-menu-view.css' => 'bcec20f0',
'rsrc/css/application/base/notification-menu.css' => '4df1ee30',
'rsrc/css/application/base/phui-theme.css' => '35883b37',
'rsrc/css/application/base/standard-page-view.css' => '8a295cb9',
@ -787,7 +787,7 @@ return array(
'phabricator-flag-css' => '2b77be8d',
'phabricator-keyboard-shortcut' => 'c9749dcd',
'phabricator-keyboard-shortcut-manager' => '37b8a04a',
'phabricator-main-menu-view' => '17b71bbc',
'phabricator-main-menu-view' => 'bcec20f0',
'phabricator-nav-view-css' => 'f8a0c1bf',
'phabricator-notification' => 'a9b91e3f',
'phabricator-notification-css' => '30240bd2',
@ -1033,9 +1033,6 @@ return array(
'javelin-stratcom',
'javelin-util',
),
'17b71bbc' => array(
'phui-theme-css',
),
'1b6acc2a' => array(
'javelin-magical-init',
'javelin-util',
@ -1990,6 +1987,9 @@ return array(
'phabricator-drag-and-drop-file-upload',
'javelin-workboard-board',
),
'bcec20f0' => array(
'phui-theme-css',
),
'c03f2fb4' => array(
'javelin-install',
),

4
webroot/rsrc/css/application/base/main-menu-view.css
View file

@ -369,6 +369,10 @@ a.phabricator-core-user-menu .caret:before {
.device-desktop .alert-notifications:hover {
margin-top: -2px;
transition-duration: .2s;
/* See T13508. Avoid animation flickering behavior if the user's cursor is
at the very bottom of the element. */
padding-bottom: 2px;
}
.device-desktop .alert-notifications:hover .phui-icon-view {