258125 2023-06-15 06:09:07 -0700 clip-path: inset() radii does not render on specific sizes of element, clip-path and radius 2026-04-07 20:19:21 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 16 All All RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/59035 InRadar P2 Normal --- 1 tombigel ahmad.saleem792 bfulgham noamraph noam simon.fraser webkit-bug-importer zalan oldest_to_newest 1961783 0 466698 tombigel 2023-06-15 06:09:07 -0700 Created attachment 466698 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 1961784 1 tombigel 2023-06-15 06:09:35 -0700 Forgot the codepen link: https://codepen.io/tombigel/pen/VwVerrV 1961834 2 simon.fraser 2023-06-15 10:12:06 -0700 Interesting bug, thanks for the report! I can reproduce. 1961835 3 webkit-bug-importer 2023-06-15 10:12:17 -0700 <rdar://problem/110847266> 2197091 4 ahmad.saleem792 2026-04-05 13:53:37 -0700 Pull request: https://github.com/WebKit/WebKit/pull/62086 2197260 5 ews-feeder 2026-04-06 09:47:17 -0700 Committed 310643@main (785dda5a7b96): <https://commits.webkit.org/310643@main> Reviewed commits have been landed. Closing PR #62086 and removing active labels. 2197851 6 ahmad.saleem792 2026-04-07 20:19:21 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59035 466698 2023-06-15 06:09:07 -0700 2023-06-15 06:09:07 -0700 a simplified usecase where clip-path inset radius does not render webkit-clip-path-bug.html text/html 485 tombigel PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCTxt ZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwt c2NhbGU9MSI+Cgk8dGl0bGU+V2Via2l0IGJ1ZyAtIGNsaXAtcGF0aDogaW5zZXQoKSByYWRpaSBk b2VzIG5vdCByZW5kZXIgb24gc3BlY2lmaWMgc2l6ZXM8L3RpdGxlPgoJPHN0eWxlIHR5cGU9InRl eHQvY3NzIj4KCQkjY29tcCB7CgkJICB3aWR0aDogNjYxcHg7CgkJICBoZWlnaHQ6IDQ0NXB4OwoJ CSAgY2xpcC1wYXRoOiBpbnNldCgxMS4yOTIzJSByb3VuZCA1MCUgNTAlIDAlIDAlKTsKCQl9CgkJ I2lubmVyIHsKCQkgIGJhY2tncm91bmQ6IHJlZDsKCQkgIGhlaWdodDogMTAwJTsKCQl9Cgk8L3N0 eWxlPgo8L2hlYWQ+Cjxib2R5PgoJPGRpdiBpZD0iY29tcCI+CgkgIDxkaXYgaWQ9ImlubmVyIj48 L2Rpdj4KCTwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4=