Bug 233553 - Combining CSS clip-path with any property that creates a new stacking context makes img element disappear
Summary: Combining CSS clip-path with any property that creates a new stacking context...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/jelmerdemaat/full/...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-11-29 02:51 PST by Jelmer de Maat
Modified: 2021-12-06 02:52 PST (History)
3 users (show)

See Also:

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
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>