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: RESOLVED FIXED    
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
Demo with fixed image URLs none

Jelmer de Maat
Reported 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"`.
Attachments
Demo HTML file showing the bug (1.88 KB, text/html)
2021-11-29 02:51 PST, Jelmer de Maat 		no flags
Details
Screenshot showing the disappeared img (960.99 KB, image/png)
2021-11-29 02:53 PST, Jelmer de Maat 		no flags
Details
Demo with fixed image URLs (1.87 KB, text/html)
2024-11-04 20:33 PST, Simon Fraser (smfr) 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Jelmer de Maat
Comment 1 2021-11-29 02:53:53 PST
Created attachment 445264 [details] Screenshot showing the disappeared img
Jelmer de Maat
Comment 2 2021-11-29 02:54:35 PST
Detected when testing https://bugs.webkit.org/show_bug.cgi?id=233469
Radar WebKit Bug Importer
Comment 3 2021-12-06 02:52:34 PST
<rdar://problem/86091397>
Ahmad Saleem
Comment 4 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!
Simon Fraser (smfr)
Comment 5 2022-10-24 16:17:37 PDT
Do we know if this worked in some older OS versions?
Ahmad Saleem
Comment 6 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.
Simon Fraser (smfr)
Comment 7 2024-11-04 20:33:03 PST
Created attachment 473141 [details] Demo with fixed image URLs
Simon Fraser (smfr)
Comment 8 2024-11-04 21:03:03 PST
Pull request: https://github.com/WebKit/WebKit/pull/36178
EWS
Comment 9 2024-11-05 11:04:56 PST
Committed 286172@main (eb1b95267c74): <https://commits.webkit.org/286172@main> Reviewed commits have been landed. Closing PR #36178 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.