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.
Using sub-integral scaling factors on margin also cause the bug.
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.
<rdar://problem/99262158>
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.
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.
So this would be a recent regression?
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.
It seems more OS related than browser version?
Ah no scratch that. :) It reproduces on both Ventura and Monterey. hmmm :( Let me retry something for testing.