WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
251756
Incorrect artifacts when resizing a flex element on Retina display
https://bugs.webkit.org/show_bug.cgi?id=251756
Summary
Incorrect artifacts when resizing a flex element on Retina display
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.
Top of Page
Format For Printing
XML
Clone This Bug