WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
258125
clip-path: inset() radii does not render on specific sizes of element, clip-path and radius
https://bugs.webkit.org/show_bug.cgi?id=258125
Summary
clip-path: inset() radii does not render on specific sizes of element, clip-p...
Tom Bigelajzen
Reported
2023-06-15 06:09:07 PDT
Created
attachment 466698
[details]
a simplified usecase where clip-path inset radius does not render When using clip-path: inset() with border-radius values, the radius is not rendered on specific cases of element size, radius size and clip-path size. In the attached code example you can see an element 661px wide and 445px high with "clip-path: inset(11.2923% round 50% 50% 0% 0%)." The radius of these exact dimensions fails consistently (At least on MacOS 13.2.1 Safari 16.3, Safari Tech Preview 171, and iOS 16.5). Any change to the width, height, clip-path size or border-radius will "fix" the issue. Also attached a link to an animated codepen where different element sizes and different radius values "glitch" on different points on the timeline
Attachments
a simplified usecase where clip-path inset radius does not render
(485 bytes, text/html)
2023-06-15 06:09 PDT
,
Tom Bigelajzen
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Tom Bigelajzen
Comment 1
2023-06-15 06:09:35 PDT
Forgot the codepen link:
https://codepen.io/tombigel/pen/VwVerrV
Simon Fraser (smfr)
Comment 2
2023-06-15 10:12:06 PDT
Interesting bug, thanks for the report! I can reproduce.
Radar WebKit Bug Importer
Comment 3
2023-06-15 10:12:17 PDT
<
rdar://problem/110847266
>
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