Bug 251756

Summary: Incorrect artifacts when resizing a flex element on Retina display
Product: WebKit Reporter: Jerome <jerome>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, karlcow, sabouhallawa, simon.fraser, webkit-bug-importer, woodlxf00, zalan, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
Attachments:
Description Flags
rendering in STP 163
none
flex-display-sub-pixel-retina none

Jerome
Reported 2023-02-05 07:45:00 PST
Hello, There seems to be a scaling issue with divs that contain SVGs. The result is a small horizontal shear between a div that contains an svg and its neighboring container. I uploaded an example here: https://olivier.link/wonderflow/ If you resize the browser window, a thin white line will flicker above or below the div containing the SVG. I was able to fix the issue by using relative position and shifting the SVG up or down one pixel, but the problem only seems to exist on Safari and not Firefox or Chrome. As someone who is still relatively new to web development, this was a real head-scratcher and took hours to resolve. It'd be great if this could be addressed to offer greater consistency across different browsers. Many thanks.
Attachments
rendering in STP 163 (831.80 KB, image/png)
2023-02-13 00:51 PST, Karl Dubost 		no flags
Details
flex-display-sub-pixel-retina (1.76 MB, image/png)
2023-02-23 10:45 PST, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-02-12 07:45:16 PST
<rdar://problem/105364179>
Karl Dubost
Comment 2 2023-02-13 00:51:58 PST
Created attachment 464968 [details] rendering in STP 163 Olivier, thanks for the test. I tried to reproduce the issue with Safari STP 163. One important detail, it reproduces only on a Retina screen. My external screen (non retina) doesn't reproduce the issue. See the screenshot with the thin line.
Said Abou-Hallawa
Comment 3 2023-02-23 10:45:27 PST
Created attachment 465139 [details] flex-display-sub-pixel-retina I think this is not related to SVG. I used web inspector to delete the SVG from the page and I was still able to reproduce it. See the attached screenshot. I think it is related to sub-pixel and flex display since it is not reproducible on 1x display.
Simon Fraser (smfr)
Comment 4 2023-02-23 13:33:59 PST
The SVG is used for the curved mask effect; if you delete it that effect disappears, so I do think this is about the SVG. Its bottom edge is not aligned with the bottom edge of the image being masked.
Said Abou-Hallawa
Comment 5 2023-02-23 16:41:00 PST
Yes this is right. I did not realize there is another SVG before the yellow circle one.
Note You need to log in before you can comment on or make changes to this bug.