216701 2020-09-18 09:30:36 -0700 WebKit incorrectly composites hundreds of elements when using position: relative 2021-01-15 05:36:07 -0800 1 1 1 Unclassified WebKit Compositing Safari Technology Preview Unspecified Unspecified NEW InRadar P2 Normal --- 1 ldebeasi webkit-unassigned niklasmerz simon.fraser webkit-bug-importer zalan oldest_to_newest 1689817 0 409137 ldebeasi 2020-09-18 09:30:36 -0700 Created attachment 409137 Code Reproduction When an element with a 3d transform is placed in the same scrollable container as elements with position: relative, the elements with position: relative are incorrectly composited. The Layers pane in Safari claims this is due to the relative elements overlapping the transformed element, even when they are not. Removing position: relative from these elements resolves the issue. Additionally, using a 2d transform instead of a 3d transform resolves the issue as well. This issue was observed in STP 113, but can be reproduced in Safari 13 as well. Additionally, this issue can be reproduced on both macOS and iOS. Steps to reproduce: 1. Open the attached code reproduction in Safari. 2. Open dev tools and navigate to the "Layers" tab. The default layout has a div with a 3d transform and a list of divs with position: relative. You should notice that there are over 150 layers rendered. 3. Uncheck the "Use 3D Transform" checkbox. This will use a 2d transform instead. You should observe that there are only 2 layers now. 4. Recheck the "Use 3D Transform" checkbox. 5. Uncheck the "Use div with position: relative" checkbox. This will remove position: relative from the list items. You should observe that there are only 3 layers now. When selecting a list element layer, Safari indicates that it was composited because it "overlaps other compositing elements". The element is overlapping the scrollable container which is composited; however, this additional compositing only happens when the element with a 3d transform is present. In this case, no list item overlaps the element with 3d transform. There are 2 reasons why I think this is a bug: 1. This behavior does not happen in Chrome. Chrome never composites the list items. 2. Given a scrollable list, this issue significantly degrades scrolling performance. It is most noticeable on an iPad. 1690366 1 webkit-bug-importer 2020-09-21 11:48:35 -0700 <rdar://problem/69317469> 1690870 2 409404 simon.fraser 2020-09-22 15:05:03 -0700 Created attachment 409404 Better testcase 1690871 3 simon.fraser 2020-09-22 15:07:10 -0700 The relative-positioned elements end up in layers because the scroller is not a CSS stacking context, so conceptually the relative elements render as siblings (not descendants). There's an optimization to avoid this (layer backing sharing) but the transformed element defeats it. If you test with the transformed element in the middle of the list you should see no layers for relative elements that come before it. 1690917 4 ldebeasi 2020-09-22 15:57:06 -0700 Ah ok that's interesting. Thanks for the additional test case -- that clarifies things a bit for me. Would this be another scenario where an optimization could be made by WebKit, or would you consider this to be expected behavior? 1690919 5 simon.fraser 2020-09-22 15:58:13 -0700 It's obviously valuable to optimize but hard to fix given webkit's current compositing architecture. 1690923 6 ldebeasi 2020-09-22 16:04:30 -0700 That's fair. I can dance around the issue for now by using 2d transforms in affected components in Ionic Framework. 1690930 7 simon.fraser 2020-09-22 16:34:12 -0700 Making the scroller a stacking context (will-change: transform or position and z-index) should eliminate this entirely. Maybe a z-index > 0 on the transformed item too. 1691946 8 ldebeasi 2020-09-25 10:58:06 -0700 Adding will-change: transform to the scrolling element solved it for us. Thanks for the suggestion! 1706433 9 ldebeasi 2020-11-11 06:13:51 -0800 Wanted to add a note for anyone who stumbles upon this and uses will-change: transform as a workaround: Make sure you only target WebKit as using will-change: transform on a scrollable element will break any position: fixed elements in the scrollable element in Chromium browsers. 1706436 10 ldebeasi 2020-11-11 06:22:55 -0800 Actually it looks like this position: fixed behavior is correct according to https://bugs.chromium.org/p/chromium/issues/detail?id=413456. There is an open WebKit issue to address this behavior: https://bugs.webkit.org/show_bug.cgi?id=167600 will-change: transform on a scrollable element is probably not a good solution here, but I will look into other workarounds. 1706507 11 simon.fraser 2020-11-11 10:14:42 -0800 Try "position: relative; z-index: 0" on the scroller. 1706991 12 ldebeasi 2020-11-12 13:05:19 -0800 That seems to work, thank you! 409137 2020-09-18 09:30:36 -0700 2020-09-18 09:30:36 -0700 Code Reproduction index.html text/html 1752 ldebeasi PGh0bWw+CiAgPGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIKICAgIGNvbnRlbnQ9Indp ZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAsIG1pbmltdW0tc2NhbGU9MS4wLCBt YXhpbXVtLXNjYWxlPTEuMCwgdXNlci1zY2FsYWJsZT1ubyI+CiAgICA8c3R5bGU+CiAgICAgIC5w b3NpdGlvbiB7CiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICB9CiAgICAKICAgICAg LmlubmVyLXNjcm9sbCB7CiAgICAgICAgb3ZlcmZsb3cteTogc2Nyb2xsOwogICAgICAgIAogICAg ICAgIGhlaWdodDogMTAwJTsKICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgfQogICAgICA8L3N0 eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImlubmVyLXNjcm9sbCI+CiAg ICAgICAgPGRpdiBjbGFzcz0idHJhbnNmb3JtIj48L2Rpdj4KICAgICAgICAKICAgICAgICA8aW5w dXQgdHlwZT0iY2hlY2tib3giIGlkPSJ0cmFuc2Zvcm0iIHZhbHVlPSIzZCIgb25jaGFuZ2U9InNl dFRyYW5zZm9ybSgpIiBjaGVja2VkPgogICAgICAgIDxsYWJlbCBmb3I9InRyYW5zZm9ybSI+VXNl IDNEIFRyYW5zZm9ybTwvbGFiZWw+CgogICAgICAgIDxici8+CiAgICAgICAgCiAgICAgICAgPGlu cHV0IHR5cGU9ImNoZWNrYm94IiBpZD0iY29tcG9uZW50IiB2YWx1ZT0iY29tcG9uZW50IiBvbmNo YW5nZT0ic2V0Q29tcG9uZW50VHlwZSgpIiBjaGVja2VkPgogICAgICAgIDxsYWJlbCBmb3I9ImNv bXBvbmVudCI+VXNlIGRpdiB3aXRoIHBvc2l0aW9uOiByZWxhdGl2ZTwvbGFiZWw+CgogICAgICAg IDxiciAvPjxiciAvPgogICAgICAgIDxkaXYgY2xhc3M9Imxpc3Qtd3JhcHBlciI+PC9kaXY+CiAg ICAgIDwvZGl2PgogICAgCiAgPC9ib2R5PgogIAogIDxzY3JpcHQ+CiAgICBjb25zdCB0cmFuc2Zv cm1DaGVja2JveCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyN0cmFuc2Zvcm0nKTsKICAgIGNv bnN0IGNvbXBvbmVudENoZWNrYm94ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2NvbXBvbmVu dCcpOwogICAgCiAgICBsZXQgdHJhbnNmb3JtID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnRy YW5zZm9ybScpOwogICAgbGV0IGxpc3QgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcubGlzdC13 cmFwcGVyJyk7CgogICAgY29uc3Qgc2V0VHJhbnNmb3JtID0gKCkgPT4gewogICAgICBjb25zdCB0 cmFuc2Zvcm1WYWx1ZSA9ICh0cmFuc2Zvcm1DaGVja2JveC5jaGVja2VkKSA/ICd0cmFuc2xhdGUz ZCgwLCAwLCAwKScgOiAndHJhbnNsYXRlKDAsIDApJzsKICAgICAgdHJhbnNmb3JtLnN0eWxlLnRy YW5zZm9ybSA9IHRyYW5zZm9ybVZhbHVlOwogICAgfQogICAgCiAgICBjb25zdCBzZXRDb21wb25l bnRUeXBlID0gKCkgPT4gewogICAgICBjb25zdCB1c2VDbGFzcyA9IGNvbXBvbmVudENoZWNrYm94 LmNoZWNrZWQ7CiAgICAgIGxldCBzdHJpbmcgPSAodXNlQ2xhc3MpID8gYDxkaXYgY2xhc3M9InBv c2l0aW9uIj5IZWxsbyBXb3JsZDwvZGl2PmAgOiAnPGRpdj5IZWxsbyBXb3JsZDwvZGl2Pic7CiAg ICAgIGxldCBsaXN0U3RyaW5nID0gJyc7CiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgMTUwOyBp KyspIHsKICAgICAgICBsaXN0U3RyaW5nICs9IHN0cmluZzsKICAgICAgfQogICAgCiAgICAgIGxp c3QuaW5uZXJIVE1MID0gbGlzdFN0cmluZzsKICAgIH0KICAKICAgIHNldFRyYW5zZm9ybSgpOwog ICAgc2V0Q29tcG9uZW50VHlwZSgpOwogIDwvc2NyaXB0Pgo8L2h0bWw+ 409404 2020-09-22 15:05:03 -0700 2020-09-22 15:05:03 -0700 Better testcase transform-triggered-layers-in-scroller.html text/html 1918 simon.fraser PGh0bWw+CiAgPGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIKICAgIGNvbnRlbnQ9Indp ZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAsIG1pbmltdW0tc2NhbGU9MS4wLCBt YXhpbXVtLXNjYWxlPTEuMCwgdXNlci1zY2FsYWJsZT1ubyI+CiAgICA8c3R5bGU+CiAgICAgIC5p bm5lci1zY3JvbGwgewogICAgICAgIG92ZXJmbG93LXk6IHNjcm9sbDsKICAgICAgICBtYXJnaW46 IDEwcHg7CiAgICAgICAgaGVpZ2h0OiA0MDBweDsKICAgICAgICB3aWR0aDogNDAwcHg7CiAgICAg ICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7CiAgICAgIH0KICAgICAgCiAgICAgIC5ib3ggewog ICAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICAgIG1hcmdpbjogMTBweDsKICAgICAgICAg IHBhZGRpbmc6IDEwcHg7CiAgICAgIH0KCiAgICAgIC5wb3NpdGlvbmVkIHsKICAgICAgICBwb3Np dGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+ CgogICAgICAgIDxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9InRyYW5zZm9ybSIgdmFsdWU9IjNk IiBvbmNoYW5nZT0ic2V0VHJhbnNmb3JtKCkiIGNoZWNrZWQ+CiAgICAgICAgPGxhYmVsIGZvcj0i dHJhbnNmb3JtIj5Vc2UgM0QgVHJhbnNmb3JtPC9sYWJlbD4KCiAgICAgICAgPGJyLz4KICAgICAg ICAKICAgICAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIGlkPSJjb21wb25lbnQiIHZhbHVlPSJj b21wb25lbnQiIG9uY2hhbmdlPSJzZXRDb21wb25lbnRUeXBlKCkiIGNoZWNrZWQ+CiAgICAgICAg PGxhYmVsIGZvcj0iY29tcG9uZW50Ij5Vc2UgZGl2IHdpdGggcG9zaXRpb246IHJlbGF0aXZlPC9s YWJlbD4KCgogICAgPGRpdiBjbGFzcz0iaW5uZXItc2Nyb2xsIj4KICAgICAgICA8ZGl2IGNsYXNz PSJ0cmFuc2Zvcm0iPjwvZGl2PgogICAgICAgIAoKICAgICAgICA8YnIgLz48YnIgLz4KICAgICAg ICA8ZGl2IGNsYXNzPSJsaXN0LXdyYXBwZXIiPjwvZGl2PgogICAgICA8L2Rpdj4KICAgIAogIDwv Ym9keT4KICAKICA8c2NyaXB0PgogICAgY29uc3QgdHJhbnNmb3JtQ2hlY2tib3ggPSBkb2N1bWVu dC5xdWVyeVNlbGVjdG9yKCcjdHJhbnNmb3JtJyk7CiAgICBjb25zdCBjb21wb25lbnRDaGVja2Jv eCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNjb21wb25lbnQnKTsKICAgIAogICAgbGV0IHRy YW5zZm9ybSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy50cmFuc2Zvcm0nKTsKICAgIGxldCBs aXN0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLmxpc3Qtd3JhcHBlcicpOwoKICAgIGNvbnN0 IHNldFRyYW5zZm9ybSA9ICgpID0+IHsKICAgICAgY29uc3QgdHJhbnNmb3JtVmFsdWUgPSAodHJh bnNmb3JtQ2hlY2tib3guY2hlY2tlZCkgPyAndHJhbnNsYXRlM2QoMCwgMCwgMCknIDogJ3RyYW5z bGF0ZSgwLCAwKSc7CiAgICAgIHRyYW5zZm9ybS5zdHlsZS50cmFuc2Zvcm0gPSB0cmFuc2Zvcm1W YWx1ZTsKICAgIH0KICAgIAogICAgY29uc3Qgc2V0Q29tcG9uZW50VHlwZSA9ICgpID0+IHsKICAg ICAgY29uc3QgdXNlQ2xhc3MgPSBjb21wb25lbnRDaGVja2JveC5jaGVja2VkOwogICAgICBsZXQg c3RyaW5nID0gKHVzZUNsYXNzKSA/IGA8ZGl2IGNsYXNzPSJwb3NpdGlvbmVkIGJveCI+SGVsbG8g V29ybGQ8L2Rpdj5gIDogJzxkaXYgY2xhc3M9Ym94PkhlbGxvIFdvcmxkPC9kaXY+JzsKICAgICAg bGV0IGxpc3RTdHJpbmcgPSAnJzsKICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCAxMDsgaSsrKSB7 CiAgICAgICAgbGlzdFN0cmluZyArPSBzdHJpbmc7CiAgICAgIH0KICAgIAogICAgICBsaXN0Lmlu bmVySFRNTCA9IGxpc3RTdHJpbmc7CiAgICB9CiAgCiAgICBzZXRUcmFuc2Zvcm0oKTsKICAgIHNl dENvbXBvbmVudFR5cGUoKTsKICA8L3NjcmlwdD4KPC9odG1sPg==