Bug 258125 - clip-path: inset() radii does not render on specific sizes of element, clip-path and radius
Summary: clip-path: inset() radii does not render on specific sizes of element, clip-p...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-06-15 06:09 PDT by Tom Bigelajzen
Modified: 2023-06-17 03:15 PDT (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Bigelajzen 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
Comment 1 Tom Bigelajzen 2023-06-15 06:09:35 PDT
Forgot the codepen link: https://codepen.io/tombigel/pen/VwVerrV
Comment 2 Simon Fraser (smfr) 2023-06-15 10:12:06 PDT
Interesting bug, thanks for the report! I can reproduce.
Comment 3 Radar WebKit Bug Importer 2023-06-15 10:12:17 PDT
<rdar://problem/110847266>