239418 2022-04-16 05:57:40 -0700 Incorrect clipping when animation is present. 2022-04-22 21:23:32 -0700 1 1 1 Unclassified WebKit Compositing Safari 15 All All NEW InRadar P2 Normal --- 1 hubert.sablonniere simon.fraser bfulgham graouts koivisto rik simon.fraser webkit-bug-importer zalan oldest_to_newest 1862045 0 457747 hubert.sablonniere 2022-04-16 05:57:40 -0700 Created attachment 457747 reduction-test.html We encoutered a inconsistent CSS behaviour between Chromium/Firefox vs. Webkit The different behavior is observed when we combine an animation on the opacity with a position:absolute element (which is itself a child of an overflow:hidden element). We tried to reduce our code to something really small to help the team figuring this out (see attachment). We put different variations in this reduction test: * animation:NO - overflow:hidden (same in Chromium/Firefox/Webkit) * animation:NO - overflow:visible (same in Chromium/Firefox/Webkit) * animation:YES - overflow:visible (same in Chromium/Firefox/Webkit) * animation:YES - overflow:hidden (different in Chromium/Firefox vs. Webkit) We observed the problem on: * Safari on iPad 15.3/605.1.15 * Gnome Epiphany on Linux 42.1 (WebkitGTK 2.36.0) We think it was working before (something like Safari 6 months ago) but it's not easy for us to test on older versions of Safari. 1862046 1 457748 zalan 2022-04-16 06:43:49 -0700 Created attachment 457748 Incorrect clipping Thanks for filing this issue (and the great test case!). It indeed looks incorrect in WebKit. It seems that animation (incorrectly) imposes clipping on the absolute child (see attached test reduction). I went all the way back to r256320 (over 2 years ago) and it was still broken there. 1862047 2 webkit-bug-importer 2022-04-16 06:45:31 -0700 <rdar://problem/91848849> 1862049 3 hubert.sablonniere 2022-04-16 06:55:55 -0700 Wow, I'm impressed by your reactivity!! Thanks for creating a better test case, and looking into the past versions. 1862051 4 zalan 2022-04-16 07:10:06 -0700 The composited layer for the inner (animated) box clips the out-of-flow child box (while the animation property does not make it a containing block) layer 0x135028830 scrollableArea 0x1350802c0 at (0,0) size 1144x695 (composited [root], bounds=at (0,0) size 1144x695, drawsContent=1, paints into ancestor=0) RenderView 0x13c0007b0 at (0,0) size 1144x695 positive z-order list (1) layer 0x135028f50 scrollableArea 0x135080360 at (0,0) size 1144x695 RenderBlock 0x13c001640 {HTML} at (0,0) size 1144x695 RenderBody 0x13c001780 {BODY} at (8,8) size 1128x679 positive z-order list (2) layer 0x135029080 at (8,8) size 300x300 RenderBlock (relative positioned) 0x13c0041e0 {DIV} at (0,0) size 300x300 [bgcolor=#008000] class="container" layer 0x1350291b0 scrollableArea 0x135080400 at (8,8) size 100x100 (composited [animation], bounds=at (0,0) size 100x100, drawsContent=1, paints into ancestor=0) RenderBlock 0x13c004320 {DIV} at (0,0) size 100x100 class="middle" positive z-order list (1) layer 0x1350292e0 at (18,18) size 280x280 RenderBlock (positioned) 0x13c004460 {DIV} at (10,10) size 280x280 [border: (3px solid #0000FF)] class="inner" The layer tree looks the same when animation is changed to some other, composited layer triggering property like transform: translateZ. However in this case the middle layer forms a containing block for the out-of-flow child and clipping is expected. 1863844 5 458197 simon.fraser 2022-04-22 21:17:37 -0700 Created attachment 458197 Testcase with will-change: z-index 1863849 6 simon.fraser 2022-04-22 21:23:32 -0700 S---------C-c-- -- tb---- ------ 30 30 0x113170700 (0,0) width=780 height=844 [SA 0x113045120] (layerID 482) {sc 30} RenderView 0x1480007b0 S-----------c-- -- tb---- lg---- 30 30 + 0x113170960 (0,0) width=780 height=844 [SA 0x113045620] RenderBlock 0x148001640 HTML 0x148000f20 --------------- -- ------ lg---- 30 30 + 0x113170a90 (28,20) width=300 height=300 RenderBlock (relative positioned) 0x148003190 DIV 0x148002b60 class='container' S---------C---- -- ------ lg-c-- 30 30 + 0x113170bc0 (0,0) width=25 height=25 (layerID 485) RenderBlock (positioned) 0x1480032d0 DIV 0x148002bf0 class='trigger' S-O-------C---- -- tb---- lg-c-- 30 30 + 0x113170cf0 (10,0) width=102 height=102 [SA 0x1130456c0] (layerID 488) overlap RenderBlock 0x148003410 DIV 0x148002c80 class='middle' --------------- -- ------ lg---- 30 30 + 0x113170e20 (10,10) width=280 height=280 RenderBlock (positioned) 0x148003550 DIV 0x148002e60 class='inner' The inner layer isn't composited; it paints into its paint-order ancestor, which is 0x113170cf0. However, when computing the bounds of that layer, we've taken overflow:hidden into account, despite it having non-clipped descendants. I think that's the bug. 457747 2022-04-16 05:57:40 -0700 2022-04-16 05:57:40 -0700 reduction-test.html index.html text/html 1650 hubert.sablonniere PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0i dXRmLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lk dGgsIGluaXRpYWwtc2NhbGU9MSI+CiAgPHRpdGxlPkRvY3VtZW50PC90aXRsZT4KICA8c3R5bGU+ CgogIEBrZXlmcmFtZXMgdGhlLWFuaW1hdGlvbiB7CiAgICBmcm9tIHsKICAgICAgb3BhY2l0eTog MC44NTsKICAgIH0KCiAgICB0byB7CiAgICAgIG9wYWNpdHk6IDAuNDU7CiAgICB9CiAgfQoKICAu YW5pbWF0aW9uIHsKICAgIGFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZTsKICAgIGFuaW1h dGlvbi1kdXJhdGlvbjogNTAwbXM7CiAgICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZp bml0ZTsKICAgIGFuaW1hdGlvbi1uYW1lOiB0aGUtYW5pbWF0aW9uOwogIH0KCiAgLnJlbGF0aXZl LXBhcmVudCB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwOwogICAgcG9zaXRpb246IHJlbGF0 aXZlOwogICAgd2lkdGg6IDIwZW07CiAgfQoKICAud3JhcHBlciB7CiAgICBkaXNwbGF5OiBpbmxp bmUtYmxvY2s7CiAgICBoZWlnaHQ6IDFlbTsKICAgIG1hcmdpbjogMWVtOwogICAgb3ZlcmZsb3c6 IGhpZGRlbjsKICAgIHdpZHRoOiAxMGVtOwogIH0KCiAgLm92ZXJmbG93LXZpc2libGUgewogICAg b3ZlcmZsb3c6IHZpc2libGU7CiAgfQoKICAucG9zaXRpb24tYWJzb2x1dGUgewogICAgYm90dG9t OiAwOwogICAgbGVmdDogMDsKICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgIHJpZ2h0OiAwOwog ICAgdG9wOiAwOwogIH0KCiAgLnBvc2l0aW9uLWFic29sdXRlIHsKICAgIGJhY2tncm91bmQtY29s b3I6IGxpbWU7CiAgfQogIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+Cgo8aDE+RGlmZmVyZW5jZSBi ZXR3ZWVuIHJlY2VudCBTYWZhcmkgdnMuIENocm9tZS9GaXJlZm94PC9oMT4KCjxoMj5hbmltYXRp b246Tk8gLSBvdmVyZmxvdzpoaWRkZW48L2gyPgoKPGRpdiBjbGFzcz0icmVsYXRpdmUtcGFyZW50 Ij4KICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIj4KICAgIDxkaXYgY2xhc3M9InBvc2l0aW9uLWFic29s dXRlIj48L2Rpdj4KICA8L2Rpdj4KPC9kaXY+Cgo8aDI+YW5pbWF0aW9uOk5PIC0gb3ZlcmZsb3c6 dmlzaWJsZTwvaDI+Cgo8ZGl2IGNsYXNzPSJyZWxhdGl2ZS1wYXJlbnQiPgogIDxkaXYgY2xhc3M9 IndyYXBwZXIgb3ZlcmZsb3ctdmlzaWJsZSI+CiAgICA8ZGl2IGNsYXNzPSJwb3NpdGlvbi1hYnNv bHV0ZSI+PC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGgyPmFuaW1hdGlvbjpZRVMgLSBvdmVyZmxv dzp2aXNpYmxlPC9oMj4KCjxkaXYgY2xhc3M9InJlbGF0aXZlLXBhcmVudCI+CiAgPGRpdiBjbGFz cz0id3JhcHBlciBhbmltYXRpb24gb3ZlcmZsb3ctdmlzaWJsZSI+CiAgICA8ZGl2IGNsYXNzPSJw b3NpdGlvbi1hYnNvbHV0ZSI+PC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGgyPmFuaW1hdGlvbjpZ RVMgLSBvdmVyZmxvdzpoaWRkZW48L2gyPgoKPGRpdiBjbGFzcz0icmVsYXRpdmUtcGFyZW50Ij4K ICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIGFuaW1hdGlvbiI+CiAgICA8ZGl2IGNsYXNzPSJwb3NpdGlv bi1hYnNvbHV0ZSI+PC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKCgo8L2JvZHk+CjwvaHRtbD4K 457748 2022-04-16 06:43:49 -0700 2022-04-16 06:43:49 -0700 Incorrect clipping 239418.html text/html 552 zalan PHN0eWxlPgpAa2V5ZnJhbWVzIHRoZS1hbmltYXRpb24gewogIGZyb20gewogICAgb3BhY2l0eTog MTsKICB9CgogIHRvIHsKICAgIG9wYWNpdHk6IDAuOTsKICB9Cn0KCi5jb250YWluZXIgewogIHBv c2l0aW9uOiByZWxhdGl2ZTsKICB3aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiAzMDBweDsKICBiYWNr Z3JvdW5kLWNvbG9yOiBncmVlbjsKfQoKLm1pZGRsZSB7CiAgaGVpZ2h0OiAxMDBweDsKICB3aWR0 aDogMTAwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKCiAgYW5pbWF0aW9uLWR1cmF0aW9uOiA1MHM7 CiAgYW5pbWF0aW9uLW5hbWU6IHRoZS1hbmltYXRpb247Cn0KCi5pbm5lciB7CiAgYm9yZGVyOiBz b2xpZCBibHVlOwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBib3R0b206IDEwOwogIGxlZnQ6IDEw OwogIHJpZ2h0OiAxMDsKICB0b3A6IDEwOwp9Cjwvc3R5bGU+CjxkaXYgY2xhc3M9Y29udGFpbmVy PgogIDxkaXYgY2xhc3M9bWlkZGxlPgogICAgPGRpdiBjbGFzcz1pbm5lcj5QQVNTIGlmIHRoaXMg dGV4dCBpcyB2aXNpYmxlLjwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4K 458197 2022-04-22 21:17:37 -0700 2022-04-22 21:17:37 -0700 Testcase with will-change: z-index clipping-with-animation.html text/html 786 simon.fraser PHN0eWxlPgogICAgLmNvbnRhaW5lciB7CiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAg ICAgIHdpZHRoOiAzMDBweDsKICAgICAgICBoZWlnaHQ6IDMwMHB4OwogICAgICAgIGJhY2tncm91 bmQtY29sb3I6IGdyZWVuOwogICAgfQoKICAgIC5taWRkbGUgewogICAgICAgIG1hcmdpbjogMTBw eDsKICAgICAgICBoZWlnaHQ6IDEwMHB4OwogICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICBv dmVyZmxvdzogaGlkZGVuOwogICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOwogICAgICAg IHdpbGwtY2hhbmdlOiB6LWluZGV4OwogICAgfQoKICAgIC5pbm5lciB7CiAgICAgICAgYm9yZGVy OiBzb2xpZCBibHVlOwogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICBib3R0b206 IDEwcHg7CiAgICAgICAgbGVmdDogMTBweDsKICAgICAgICByaWdodDogMTBweDsKICAgICAgICB0 b3A6IDEwcHg7CiAgICB9CgogICAgLnRyaWdnZXIgewogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0 ZTsKICAgICAgICBoZWlnaHQ6IDI1cHg7CiAgICAgICAgd2lkdGg6IDI1cHg7CiAgICAgICAgd2ls bC1jaGFuZ2U6IHRyYW5zZm9ybTsKICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOwogICAg fQo8L3N0eWxlPgo8ZGl2IGNsYXNzPWNvbnRhaW5lcj4KICAgIDxkaXYgY2xhc3M9InRyaWdnZXIi PjwvZGl2PgogIDxkaXYgY2xhc3M9bWlkZGxlPgogICAgPGRpdiBjbGFzcz1pbm5lcj5QQVNTIGlm IHRoaXMgdGV4dCBpcyB2aXNpYmxlLjwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4K