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.
<rdar://problem/105364179>
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.
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.
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.
Yes this is right. I did not realize there is another SVG before the yellow circle one.