Created attachment 465021 [details] Minimal reproduction html We have an svg on the right side of text, we want to fade it in when the row is hovered, the problem is that it wobbles. From what I observe, movement happens when animation starts and ends. Giving a certain width to the text element fixes the issue. Also tried to wrap the svg in an absolute div, or other similar structures but couldn't figure out a proper workaround. Happens in Safari 16 (monterey) and Safari 16.2 (ventura) on M1 mac
Created attachment 465022 [details] Video showing the movement
Created attachment 465023 [details] Minimal reproduction html revised It turned out that it was not related to the text at all, rather it was related to the subpixel alignment caused by the width of text.
I am able to reproduce this bug using WebKit ToT (260676@main) as well using Mini-Browser.
<rdar://problem/105822810>
This happens on 2x display only. It does not happen on 1x display.
Created attachment 465138 [details] Safari-Chrome-sub-pixel-retina-magnified I think the problem is in the static display of the SVG. In fact the display is correct while the animation is running. The SVG moves half pixel at the beginning of the animation to the left (which is the correct display position) and then it moves it back at the end. See the attached screenshot which shows a magnified display for Safari at the top and Chrome at the bottom.