Bug 240281

Summary:

Nested transform: perspective() with filter: drop-shadow breaks rendering

Product:

WebKit

Reporter:

Adam Seckel <adam.seckel>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
Test reduction	none

Description Adam Seckel 2022-05-10 09:03:00 PDT

A layer with transform: perspective(1200px), and filter: drop-shadow(...), that is itself a descendant of a layer with transform: perspective(1200px), fails to render at the expected size.

Reproduction: https://codesandbox.io/s/spring-fire-cv5h1o?file=/src/App.js

Comment 1 Radar WebKit Bug Importer 2022-05-17 09:03:16 PDT

<rdar://problem/93428199>

Comment 2 zalan 2022-05-26 14:54:33 PDT

Created attachment 459793 [details]
Test reduction

Comment 3 zalan 2022-05-26 14:57:34 PDT

Both the render and the layer tree look correct. This must be some perspective painting hiccup.

B---YGLSC --* RenderView at (0,0) size 1310x673 renderer->(0x1180007b0)
B-----LS- --    HTML RenderBlock at (0,0) size 1310x673 renderer->(0x118001640) node->(0x118000f20)
B-------- --      BODY RenderBody at (8,8) size 1294x657 renderer->(0x118001780) node->(0x118001160)
B-----L-C --        DIV RenderBlock at (0,0) size 800x500 renderer->(0x118003620) node->(0x118003140)
B-----L-C --          DIV RenderBlock at (0,0) size 800x500 renderer->(0x118003760) node->(0x1180031d0)

layer 0x11609d1b0 scrollableArea 0x11612c180 at (0,0) size 1310x673 (composited [root], bounds=at (0,0) size 1310x673, drawsContent=0, paints into ancestor=0)
  RenderView 0x1180007b0 at (0,0) size 1310x673
 positive z-order list (1)
  layer 0x11609d410 scrollableArea 0x11612c220 at (0,0) size 1310x673
    RenderBlock 0x118001640 {HTML} at (0,0) size 1310x673
      RenderBody 0x118001780 {BODY} at (8,8) size 1294x657
   positive z-order list (1)
    layer 0x11609d670 at (8,8) size 800x500 (composited [3D transform], bounds=at (0,0) size 800x500, drawsContent=0, paints into ancestor=0)
      RenderBlock 0x118003620 {DIV} at (0,0) size 800x500 [bgcolor=#FF0000] class="container"
     positive z-order list (1)
      layer 0x11609d7a0 at (8,8) size 800x500 (composited [3D transform], bounds=at (0,0) size 800x500, drawsContent=1, paints into ancestor=0)
        RenderBlock 0x118003760 {DIV} at (0,0) size 800x500 [bgcolor=#008000] class="child"