Bug 233553

Summary: Combining CSS clip-path with any property that creates a new stacking context makes img element disappear
Product: WebKit Reporter: Jelmer de Maat <post>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, simon.fraser, thorton, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
URL: https://codepen.io/jelmerdemaat/full/MWEgRBQ
Attachments:
Description Flags
Demo HTML file showing the bug
none
Screenshot showing the disappeared img none

Description Jelmer de Maat 2021-11-29 02:51:37 PST 
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"`.
Comment 1 Jelmer de Maat 2021-11-29 02:53:53 PST 
Created attachment 445264 [details]
Screenshot showing the disappeared img
Comment 2 Jelmer de Maat 2021-11-29 02:54:35 PST 
Detected when testing https://bugs.webkit.org/show_bug.cgi?id=233469
Comment 3 Radar WebKit Bug Importer 2021-12-06 02:52:34 PST 
<rdar://problem/86091397>
Comment 4 Ahmad Saleem 2022-10-24 15:33:38 PDT 
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!
Comment 5 Simon Fraser (smfr) 2022-10-24 16:17:37 PDT 
Do we know if this worked in some older OS versions?
Comment 6 Ahmad Saleem 2022-10-25 00:45:16 PDT 
(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.