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

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>