1919381 - Slightly janky <aside> animation

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Andrew Overholt [:overholt]]

Attachment: Screen Recording 2024-09-17 at 2.54.35 PM.mov

It feels like the animation for <aside> pauses for a second before getting to its full size. I took a screencast and am attaching it here.

Comment 1

[Boris Chiou [:boris]]

It looks like it created a very small <aside> element first when clicking this span element (with a scale(0.1) transform), and then started the transition [1] on <aside> to the full size (i.e. scale(1)). I saw the similar behavior on Chrome/Safari. Perhaps it is by the design of this webpage?

[1] the custom property used in transform property:

  --popover-transform: scale(0.1) translateZ(0);  // When creating the `<aside>` element. This is the before-change style.
  --popover-active-transform: scale(1) translateZ(0);  // This is the after-change style.

Comment 2

[Daniel Holbert [:dholbert]]

I think this isn't Firefox-specific (though I agree it feels janky). Other browsers seem to give me the same behavior (sounds like that's Boris's experience too)

Andrew: are other browsers behaving substantially better for you?

In particular:

• If I open the Animations devtools in Firefox to see a visualization of the animation, I can see that the transform animation explicitly starts with 100ms delay or so between two animations (i.e. it's not that we're starting an animation and stuttering as we play it)
• A profile I captured (with maximum sampling resolution) does not show us doing anything particularly busy that would correspond to a Firefox bug: https://share.firefox.dev/4d4GL0M
• If I poke at the JS in devtools, I see that this animation logic involves a setTimeout with t=100ms which could easily be what's responsible for the delay here.
• Their animation timing function is a bit odd here - they start with an abrupt snap to scale(0.1) (which seems like a rapid scale-up from nothing) and then they start an ease transform which makes the interpolation proceed slowly at first from that point.

tl;dr I'm pretty sure this is a site bug, though we can poke further if this looks substantially better in other browsers on some config.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screencast of Firefox, Chrome, Safari on dholbert's MacBook Pro

Comment 4

[Daniel Holbert [:dholbert]]

(I do occasionally see an animation that feels smoother, but I'm not yet noticing that happening more frequently in any one browser; and I'm suspecting it might just happen due to arbitrary setTimeout firing-order in the site's JS, or something along those lines.)

Comment 5

[Andrew Overholt [:overholt]]

Ah, thanks. It's maybe slightly smoother in Safari but barely and I could be imagining it. I should have looked to see the transition when I naively assumed it was our default <aside> behaviour.