[UI, UX] Jagged animation of animated UI elements

[XakerTwo]

Description Possibly related to #889 and #878

When some elements is showing up, that showing up is not smooth as it should be. Long time i not notice nor pay enough attention to the issue. But recently i accidentally notice when and how it happen - when mouse button up is happened and cursor start moving, while such showing up(any animations) performed. It does not happens if you simply holds the mouse button and then move cursor, mouse button up is necessary.

additional clarification:

• mouse buttons must be in released state.
• cursor should move in bound of the browser' window rect
• animation can be initiated by keyboard and will be affected while conditions above met

Animation stop smooth playing and just hang on current "frame" until animation end reached, then the end state is shown.

But there is two possible scenario(based on my observations)

1. when the showing up is direct reaction to click. Mostly noticeable for context-menu-like elements (page context menu, ⋮ menu). Usually you will catch the frame when context menu is half transparent
2. when the showing up is indirect reaction and called during or after animation of target element. Cuz target has own animation, that is struggled, showing the popup need twice much time(the showing up animation simply waits for the keyframe, but get only the animation end and then starts). Noticeable for Site settings popup in omnibox and extensions buttons (any extension or Extensions popup).

To Reproduce

1. click on ⋮ menu button (perform mouse button press and release)
2. start move cursor in the same moment as you release button
3. pay attention on how the menu showing up and the button highlight animations performed
4. try few times with and without cursor moving to see the difference

Alternative reproduce (works for any context menu with disabled/non-action items)

1. call the ⋮ menu
2. moving cursor over the menu items and see how laggy their highlighting are
3. now hold the mouse button on Zoom or Edit group title, so the menu will remain open
4. moving cursor over the menu items and see how fast their highlighting are now

Expected behavior Smooth animation as if the cursor is still

Screenshots Video On request

Desktop:

• OS: Windows 7 SP1 x64
• SM: 126.0.6478.249 R3 x64

Additional context Seems that ⋮ menu button is kind of uniq, cuz while it has self click animation, the showing up animation is also affected, that let me guess that both animations directly called on clicking, unlike the Extensions and the Site settings buttons

[MizaGBF]

I reported this problem with the ⋮ menu in one of the issues you mentionned (#889) thinking it could be related, but I never managed to reproduce it consistently. Your steps to reproduce the issue work wonder, I can confirm it occurs on Windows 8.1 too. For me, it also occurs when I right click on any web page (Right click and move the mouse: The context menu fade-in animation always stutters). I can also confirm what you said at the start: It doesn't occur if I right-click while moving the mouse. I must start moving it when I release the press.

I manage to reproduce the issue with my keyboard context key (making appear the right-click menu this way and moving the mouse at the same time) but this isn't consistent this way: I get it like 5~10% of the time instead of 100%. Maybe it has something to do with the mouse position or the highlighting of the context menu when the mouse is over one of the choices?

[XakerTwo]

with keyboard, for me, it's happens 100% times. And about the possible nature of this issue - it's sligtly similar to handling window title bar click, when whole window drawing freezes(Win+R -> hold mouse button on title bar, don't move and look at the input cursor, for the right button it will freeze until context menu closed, for the left button it will unfreeze soon). But while for single animation it's looks like just hang until animation ends, i think it's just dramatic decrease of rate of internal animation loop ("FPS" drop)

one more interesting appearance when you start drag of a tab with displayed tooltip(rich/card-like tooltip, not tested with native/windows), dragging has huge lag, possibly due to tooltip show/hide animation. Additionally you can see half-transparent tooltip following the cursor, so it looks like wrong dragging target

Btw, i wish, someone on supported systems reports in comments does all/any of the above happens on these OS-es