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

• Status: NEW
• Component: Layout and Rendering

[Adam Seckel]

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

[Radar WebKit Bug Importer]

<rdar://problem/93428199>

[zalan]

Created attachment 459793 [details]
Test reduction

[zalan]

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"