Bug 244406 – Unexpected shift at end of scale transition

• Component: Animations
• Status: NEW

[Jon Lee]

See codepen on desktop:
https://codepen.io/legion80/pen/JjLqgNV

Mouse over the icon links.

There is a scale transition that happens on hover. At the end, the icon shifts to the right.

Changing the font-size to something integral, in the <nav> CSS, fixes the issue.

Does not happen in Firefox or Chrome.

[Jon Lee]

Using sub-integral scaling factors on margin also cause the bug.

[Karl Dubost]

Jon, thanks for the report. 

I can't reproduce in STP 152 on Ventura. 
but I can reproduce on the normal version. 

This is happening during the transition set by 

svg:hover {
fill: red;
transform: scale(1.2);
transition: transform 200ms;
}

With a longer transition, we can see that 
it's moving to the left, just right away
then the transition is starting and 
once it has finished, it's moving to the right back in position.

[Radar WebKit Bug Importer]

<rdar://problem/99262158>

[Jon Lee]

I can reproduce in STP 152 on Monterey 12.5.1.

Karl, if you try other scaling factors, maybe something that includes the hundredths--scale(1.33), for example-- does it then repro on Ventura? I haven't had a chance to switch over to the beta to try.

[Karl Dubost]

Thanks Jon,

Tested on macOS 13.0 ventura
---
Safari                     16.1          18614.2.1.1.1 REPRODUCE
Safari Technology Preview  16.0          18615.1.2.3.  DOES NOT REPRODUCE

even playing with different values of the scale and making sure that all experimental features are set to defaults.

[Antoine Quint]

So this would be a recent regression?

[Jon Lee]

I don't think this is an STP-only regression.

On macOS 12.5.1, with stock Safari, and also updating to Safari 16, I can reproduce. It reproduces on STP 153, also.

[Karl Dubost]

It seems more OS related than browser version?

[Karl Dubost]

Ah no scratch that. :) 
It reproduces on both Ventura and Monterey. 
hmmm :( Let me retry something for testing.