Created attachment 445263 [details] Demo HTML file showing the bug Combining CSS a `clip-path: url(#shape)` declaration with any property that creates a new stacking context (like `transform: translate3d(0,0,0)`) makes an <img> element disappear completely. It does take up its space in pixels, but is otherwise invisible. See attachment or demo link: https://codepen.io/jelmerdemaat/full/MWEgRBQ Issue does not occur when `transform` is removed. Issue does not occur when element is a <div> in stead of an <img>. Note that the SVG shape has an attribute of `clipPathUnits="objectBoundingBox"`.
Created attachment 445264 [details] Screenshot showing the disappeared img
Detected when testing https://bugs.webkit.org/show_bug.cgi?id=233469
<rdar://problem/86091397>
I am able to reproduce this bug in Safari Technology Preview 156 as well and Safari does not load picture for: "<img> with clip-path: url(#shape) and transform: translate3d(0,0,0):" While both Chrome Canary 109 and Firefox Nightly 108 does. Just wanted to share updated testing results. Thanks!
Do we know if this worked in some older OS versions?
(In reply to Simon Fraser (smfr) from comment #5) > Do we know if this worked in some older OS versions? It was not working with macOS Monterey as well since I tested it few days back but forgot to post comment and now tried again today with Ventura. Unfortunately, my first experience with macOS was with Monterey only.