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, 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

Description Jerome 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.
Comment 1 Radar WebKit Bug Importer 2023-02-12 07:45:16 PST 
<rdar://problem/105364179>
Comment 2 Karl Dubost 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.
Comment 3 Said Abou-Hallawa 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.
Comment 4 Simon Fraser (smfr) 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.
Comment 5 Said Abou-Hallawa 2023-02-23 16:41:00 PST 
Yes this is right. I did not realize there is another SVG before the yellow circle one.