Bug 252385

Summary: SVG located after subpixel width wobbles when opacity animation kicks in
Product: WebKit Reporter: Orkhan Alikhanov <oalikhanov>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, graouts, karlcow, sabouhallawa, webkit-bug-importer, zalan, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Minimal reproduction html
none
Video showing the movement
none
Minimal reproduction html revised
none
Safari-Chrome-sub-pixel-retina-magnified none

Orkhan Alikhanov
Reported 2023-02-16 01:12:44 PST
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
Attachments
Minimal reproduction html (1.05 KB, text/html)
2023-02-16 01:12 PST, Orkhan Alikhanov 		no flags
Details
Video showing the movement (467.77 KB, video/quicktime)
2023-02-16 01:17 PST, Orkhan Alikhanov 		no flags
Details
Minimal reproduction html revised (1.31 KB, text/html)
2023-02-16 01:44 PST, Orkhan Alikhanov 		no flags
Details
Safari-Chrome-sub-pixel-retina-magnified (1.13 MB, image/png)
2023-02-23 10:15 PST, Said Abou-Hallawa 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Orkhan Alikhanov
Comment 1 2023-02-16 01:17:22 PST
Created attachment 465022 [details] Video showing the movement
Orkhan Alikhanov
Comment 2 2023-02-16 01:44:37 PST
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.
Ahmad Saleem
Comment 3 2023-02-22 11:13:47 PST
I am able to reproduce this bug using WebKit ToT (260676@main) as well using Mini-Browser.
Radar WebKit Bug Importer
Comment 4 2023-02-23 01:13:19 PST
<rdar://problem/105822810>
Said Abou-Hallawa
Comment 5 2023-02-23 09:53:37 PST
This happens on 2x display only. It does not happen on 1x display.
Said Abou-Hallawa
Comment 6 2023-02-23 10:15:55 PST
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.
Note You need to log in before you can comment on or make changes to this bug.