See repro at https://codepen.io/tremby/pen/BaEqYBg On other browsers (Firefox, Chromium), I see the whole box and its thick border, because the clip-path is set to cover the whole element. On Safari I see the same thing as long as the element is at the very top left of the viewport (or maybe some other offset parent; I didn't dig this far). But if it's away from the corner like it is in the example, in this case due to margins, it seems like the clip area is the right size and shape, but starting in the top left corner of the document.
Created attachment 471006 [details] rendering in safari, firefox, chrome @bart, Are you sure about the codepen, I do not see any differences whichever the browser. Nothing is being displayed. Or Maybe it has already been fixed. It doesn't reproduce on STP 192 too. Nothing is visible.
Apologies, I must have neglected to hit save after finishing it. I've updated it; please look again, or here's the contents showing the issue (it shows the full element with the whole thick black border in Firefox and other browsers, and it's clipped incorrectly on Safari): <div> <p> Line 1: 1 2 3 4 5 6 7 8 9 10 </p> <p> Line 2: 1 2 3 4 5 6 7 8 9 10 </p> </div> --- html, body { margin: 0; padding: 0; } div { background-color: #ccc; border: 10px solid black; clip-path: xywh(0 0 100% 100%); width: 20em; margin-top: 30px; margin-left: 10px; } --- You'll find if you manipulate the margin that the clip path seems to be anchored to the viewport corner rather than the element corner.
Created attachment 471057 [details] rendering in safari, firefox, chrome confirmed. Safari Technology Preview 191 20619.1.6.3 Firefox Nightly 127.0a1 12724.4.22 Google Chrome Canary 126.0.6434.0 6434.0
<rdar://problem/127042514>