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: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: 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>