| Summary: | clip-path: inset() radii does not render on specific sizes of element, clip-path and radius | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Tom Bigelajzen <tombigel> | ||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | bfulgham, noamraph, noam, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 16 | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
Forgot the codepen link: https://codepen.io/tombigel/pen/VwVerrV Interesting bug, thanks for the report! I can reproduce. |
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