236260 2022-02-07 14:02:03 -0800 REGRESSION (r285885): Angular virtual scrollers no longer work (because of contain:strict) 2022-03-30 09:09:30 -0700 1 1 1 Unclassified WebKit Scrolling Safari Technology Preview Unspecified Unspecified RESOLVED FIXED InRadar P2 Critical --- 1 kkelchen rbuis bfulgham cathiechen changseok clopez esprehn+autocc ews-watchlist glenn kondapallykalyan nicolas.ramz pdr rbuis simon.fraser webkit-bug-importer youennf zalan oldest_to_newest 1838347 0 kkelchen 2022-02-07 14:02:03 -0800 Hello there! 👋 This issue was introduced in Safari 15.4 and occurs on macOS and iOS. Currently, Safari 15.4 is the next version of Safari and is in "beta". You can use it on macOS by installing Safari Technology Preview 15.4. You can use it on iOS by installing iOS 15.4 Beta. Description We use the Angular CDK's virtual scroll control (https://material.angular.io/cdk/scrolling/overview ) in our application. For some reason, the virtual scroll control will no longer scroll on 15.4 although it works fine on 15.3 and previous versions. I have logged an issue with the Angular CDK here: https://github.com/angular/components/issues/24373 . Given how this broke, this may be an issue in WebKit 15.4 and not something to be fixed in the Angular CDK, but I don't know for sure. I logged an issue with the Angular CDK to at least help the maintainers and others who might begin running into this issue have some awareness as to what's going on. I will also provide a link this WebKit issue in the Angular CDK issue. Reproduction Steps to reproduce: 1. Open https://material.angular.io/cdk/scrolling/examples on Safari 15.4. - Safari 15.4 is the next version of Safari and is currently in beta. You can use it on macOS by installing Safari Technology Preview 15.4. You can use it on iOS by installing iOS 15.4 Beta. 2. When you try scrolling the examples you'll see the virtual list will not scroll at all. - When using macOS, you'll see the vertical scrollbar no longer appears. You can't scroll using a mouse scroll wheel either. - When using iOS, touch-based scrolling doesn't work. If you open the same examples on Safari 15.3 (current stable version), the lists scroll and the vertical scrollbar is present on macOS. Expected Behavior Virtual scroll lists can scroll on Safari 15.4 like they do on Safari 15.3. Actual Behavior Virtual scroll lists do not scroll on Safari 15.4. Environment (This is inferred from the StackBlitz examples provided with the examples at https://material.angular.io/cdk/scrolling/examples .) Angular: 13.0.3 CDK/Material: 13.2.0 Browser(s): Safari 15.4 Operating System (e.g. Windows, macOS, Ubuntu): macOS, iOS 1838348 1 kkelchen 2022-02-07 14:06:05 -0800 I'm not seeing an edit button (sorry, this is my first time submitting a Bugzilla/WebKit issue 😅) but I wanted to add a big THANK YOU for taking the time to consider looking into this issue! Take care, Kevin 1838352 2 webkit-bug-importer 2022-02-07 14:13:30 -0800 <rdar://problem/88593617> 1838355 3 simon.fraser 2022-02-07 14:17:12 -0800 It looks like the `contain: strict` breaks scrolling on Webkit (but not other browsers). 1838356 4 webkit-bug-importer 2022-02-07 14:17:25 -0800 <rdar://problem/88593818> 1838357 5 simon.fraser 2022-02-07 14:18:05 -0800 Confirmed that turning off CSS Containment fixes this. 1838358 6 kkelchen 2022-02-07 14:23:35 -0800 Wow--thanks for being so amazingly responsive! 😀 I know that's not some kind of guarantee of a fix but I at least sure do appreciate someone looking at this so soon! ❤️ 1838365 7 rbuis 2022-02-07 14:34:56 -0800 Does the problem go away for subsets of contain: size layout paint? Maybe we can pinpoint if the problem is due to one particular kind of containment. 1838370 8 simon.fraser 2022-02-07 14:41:44 -0800 It doesn't reproduce in a simple testcase. Might be something about dynamic content size changes. 1838389 9 451160 simon.fraser 2022-02-07 15:14:43 -0800 Created attachment 451160 Reduction Test case. Scrolled content has to be position:absolute to show the bug. 1838393 10 simon.fraser 2022-02-07 15:17:55 -0800 My guess is that this is about layout overflow computation. 1838398 11 kkelchen 2022-02-07 15:23:30 -0800 Wow! Thank you for creating a far simpler reproduction sample, Simon! 😀 I had tried to fiddle a little with some of the CSS of the Angular virtual scroll example in effort to pinpoint what contributes to the issue but was unsuccessful. 😅 I'm glad you were able to do so! Thank you!! 1838438 12 zalan 2022-02-07 17:04:32 -0800 This must have regressed at https://trac.webkit.org/changeset/285885/webkit as this code below does not look correct: void RenderBox::addOverflowFromChild(const RenderBox* child, const LayoutSize& delta) { if (paintContainmentApplies()) return; ... paint containment should not prevent collecting scrollable overflow (only ink overflow) 1838478 13 simon.fraser 2022-02-07 18:40:39 -0800 <rdar://problem/88593617> 1838690 14 451254 rbuis 2022-02-08 08:36:36 -0800 Created attachment 451254 Patch 1838691 15 ews-watchlist 2022-02-08 08:44:45 -0800 This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess 1838692 16 kkelchen 2022-02-08 08:48:32 -0800 Thank you so much for working on a fix, Rob! 😀 1838696 17 rbuis 2022-02-08 08:55:37 -0800 (In reply to Kevin from comment #16) > Thank you so much for working on a fix, Rob! 😀 No problemo! Was my mistake, so a fix was in order :) 1838931 18 ews-feeder 2022-02-08 15:50:42 -0800 Committed r289443 (246991@main): <https://commits.webkit.org/246991@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 451254. 1856328 19 nicolas.ramz 2022-03-30 01:38:19 -0700 Is the fix included in Safari 15.4 that was just released or do we have to wait for a bug fix release? 1856408 20 simon.fraser 2022-03-30 09:09:30 -0700 This should be fixed in 15.4, yes. 451160 2022-02-07 15:14:43 -0800 2022-02-07 15:14:43 -0800 Reduction contain-scrolling.html text/html 729 simon.fraser PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBj b250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgc2hyaW5rLXRvLWZp dD1ubyI+CiAgICA8c3R5bGU+CiAgICAgICAgLmNvbnRhaW5lciB7CiAgICAgICAgICAgIHdpZHRo OiAzMDBweDsKICAgICAgICAgICAgaGVpZ2h0OiAzMDBweDsKICAgICAgICAgICAgbWFyZ2luOiAx MDBweDsKICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7CiAgICAgICAgICAgIG92 ZXJmbG93OiBhdXRvOwogICAgICAgICAgICBjb250YWluOiBzdHJpY3Q7CiAgICAgICAgfQoKICAg ICAgICAuY29udGVudCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsgLyogcmVtb3Zp bmcgdGhpcyBmaXhlcyB0aGUgYnVnICovCiAgICAgICAgICAgIGhlaWdodDogNTAwJTsKICAgICAg ICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgIGJhY2tncm91bmQtaW1hZ2U6IHJlcGVhdGlu Zy1saW5lYXItZ3JhZGllbnQod2hpdGUsIHNpbHZlciAyMDBweCk7CiAgICAgICAgfQogICAgPC9z dHlsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAg PGRpdiBjbGFzcz0iY29udGVudCI+CiAgICAgICAgICAgIFRoaXMgc2hvdWxkIGJlIHNjcm9sbGFi bGUKICAgICAgICA8L2Rpdj4KICAgIDwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K 451254 2022-02-08 08:36:36 -0800 2022-02-08 15:50:45 -0800 Patch bug-236260-20220208163635.patch text/plain 4650 rbuis U3VidmVyc2lvbiBSZXZpc2lvbjogMjg5MzU5CmRpZmYgLS1naXQgYS9Tb3VyY2UvV2ViQ29yZS9D aGFuZ2VMb2cgYi9Tb3VyY2UvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXggYmM1MTI4YjI1MzMwYzVk YzdhYTA3NDE5YmU4MWYwMTA5MzQ4ZjYxZi4uNGEyZGRiYmQxYTZmNDgzYTQ1NDlmNzNiMjhjZmY4 MDQxZTg0Yjk1OCAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nCisrKyBiL1Nv dXJjZS9XZWJDb3JlL0NoYW5nZUxvZwpAQCAtMSwzICsxLDE4IEBACisyMDIyLTAyLTA4ICBSb2Ig QnVpcyAgPHJidWlzQGlnYWxpYS5jb20+CisKKyAgICAgICAgUkVHUkVTU0lPTiAoMTUuNCk6IEFu Z3VsYXIgdmlydHVhbCBzY3JvbGxlcnMgbm8gbG9uZ2VyIHdvcmsgKGJlY2F1c2Ugb2YgY29udGFp bjpzdHJpY3QpCisgICAgICAgIGh0dHBzOi8vYnVncy53ZWJraXQub3JnL3Nob3dfYnVnLmNnaT9p ZD0yMzYyNjAKKworICAgICAgICBSZXZpZXdlZCBieSBOT0JPRFkgKE9PUFMhKS4KKworICAgICAg ICBQYWludCBjb250YWlubWVudCBkaWQgbm90IGFsbG93IGNvbGxlY3Rpbmcgc2Nyb2xsYWJsZSBv dmVyZmxvdywgYnJlYWtpbmcgc2Nyb2xsaW5nCisgICAgICAgIG9mIHRoZSBjb250YWluZXIgY29u dGVudHMsIHRoaXMgcGF0Y2ggZml4ZXMgdGhhdC4KKworICAgICAgICBUZXN0OiBpbXBvcnRlZC93 M2Mvd2ViLXBsYXRmb3JtLXRlc3RzL2Nzcy9jc3MtY29udGFpbi9jb250YWluLXBhaW50LTA0OS5o dG1sCisKKyAgICAgICAgKiByZW5kZXJpbmcvUmVuZGVyQm94LmNwcDoKKyAgICAgICAgKFdlYkNv cmU6OlJlbmRlckJveDo6YWRkT3ZlcmZsb3dGcm9tQ2hpbGQpOgorCiAyMDIyLTAyLTA3ICBDb21t aXQgUXVldWUgIDxjb21taXQtcXVldWVAd2Via2l0Lm9yZz4KIAogICAgICAgICBVbnJldmlld2Vk LCByZXZlcnRpbmcgcjI4OTIyNy4KZGlmZiAtLWdpdCBhL1NvdXJjZS9XZWJDb3JlL3JlbmRlcmlu Zy9SZW5kZXJCb3guY3BwIGIvU291cmNlL1dlYkNvcmUvcmVuZGVyaW5nL1JlbmRlckJveC5jcHAK aW5kZXggODAyNGY0NTY2MmZjMTZmMGE0ZGY4YmM1MGQwNzBkYzljNTQ1ZjUzMC4uM2Y1ZDcyMmY3 OTdiZGU1ZTRmZmMzNDRhNDgwNDAxMjA5OGIyY2RlMiAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNv cmUvcmVuZGVyaW5nL1JlbmRlckJveC5jcHAKKysrIGIvU291cmNlL1dlYkNvcmUvcmVuZGVyaW5n L1JlbmRlckJveC5jcHAKQEAgLTQ5ODYsOCArNDk4Niw2IEBAIExheW91dFJlY3QgUmVuZGVyQm94 OjphcHBseVZpc3VhbEVmZmVjdE92ZXJmbG93KGNvbnN0IExheW91dFJlY3QmIGJvcmRlckJveCkg Y29uCiAKIHZvaWQgUmVuZGVyQm94OjphZGRPdmVyZmxvd0Zyb21DaGlsZChjb25zdCBSZW5kZXJC b3gqIGNoaWxkLCBjb25zdCBMYXlvdXRTaXplJiBkZWx0YSkKIHsKLSAgICBpZiAocGFpbnRDb250 YWlubWVudEFwcGxpZXMoKSkKLSAgICAgICAgcmV0dXJuOwogICAgIC8vIE5ldmVyIGFsbG93IGZs b3cgdGhyZWFkcyB0byBwcm9wYWdhdGUgb3ZlcmZsb3cgdXAgdG8gYSBwYXJlbnQuCiAgICAgaWYg KGNoaWxkLT5pc1JlbmRlckZyYWdtZW50ZWRGbG93KCkpCiAgICAgICAgIHJldHVybjsKQEAgLTUw MDMsNiArNTAwMSw5IEBAIHZvaWQgUmVuZGVyQm94OjphZGRPdmVyZmxvd0Zyb21DaGlsZChjb25z dCBSZW5kZXJCb3gqIGNoaWxkLCBjb25zdCBMYXlvdXRTaXplJiBkCiAgICAgY2hpbGRMYXlvdXRP dmVyZmxvd1JlY3QubW92ZShkZWx0YSk7CiAgICAgYWRkTGF5b3V0T3ZlcmZsb3coY2hpbGRMYXlv dXRPdmVyZmxvd1JlY3QpOwogCisgICAgaWYgKHBhaW50Q29udGFpbm1lbnRBcHBsaWVzKCkpCisg ICAgICAgIHJldHVybjsKKwogICAgIC8vIEFkZCBpbiB2aXN1YWwgb3ZlcmZsb3cgZnJvbSB0aGUg Y2hpbGQuICBFdmVuIGlmIHRoZSBjaGlsZCBjbGlwcyBpdHMgb3ZlcmZsb3csIGl0IG1heSBzdGls bAogICAgIC8vIGhhdmUgdmlzdWFsIG92ZXJmbG93IG9mIGl0cyBvd24gc2V0IGZyb20gYm94IHNo YWRvd3Mgb3IgcmVmbGVjdGlvbnMuIEl0IGlzIHVubmVjZXNzYXJ5IHRvIHByb3BhZ2F0ZSB0aGlz CiAgICAgLy8gb3ZlcmZsb3cgaWYgd2UgYXJlIGNsaXBwaW5nIG91ciBvd24gb3ZlcmZsb3cuCmRp ZmYgLS1naXQgYS9MYXlvdXRUZXN0cy9pbXBvcnRlZC93M2MvQ2hhbmdlTG9nIGIvTGF5b3V0VGVz dHMvaW1wb3J0ZWQvdzNjL0NoYW5nZUxvZwppbmRleCAxOWFlNmI4ZWU5ODViYzg2N2QzZTM5ODY1 NDkxODM5N2QyZTM2YjI5Li4yZWJhMWZjODYwNzU3N2U5YmQwMmFhYzNmM2Q4ZjUyNTE2YWU4MGIx IDEwMDY0NAotLS0gYS9MYXlvdXRUZXN0cy9pbXBvcnRlZC93M2MvQ2hhbmdlTG9nCisrKyBiL0xh eW91dFRlc3RzL2ltcG9ydGVkL3czYy9DaGFuZ2VMb2cKQEAgLTEsMyArMSwxMyBAQAorMjAyMi0w Mi0wOCAgUm9iIEJ1aXMgIDxyYnVpc0BpZ2FsaWEuY29tPgorCisgICAgICAgIFJFR1JFU1NJT04g KDE1LjQpOiBBbmd1bGFyIHZpcnR1YWwgc2Nyb2xsZXJzIG5vIGxvbmdlciB3b3JrIChiZWNhdXNl IG9mIGNvbnRhaW46c3RyaWN0KQorICAgICAgICBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93 X2J1Zy5jZ2k/aWQ9MjM2MjYwCisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9CT0RZIChPT1BTISku CisKKyAgICAgICAgKiB3ZWItcGxhdGZvcm0tdGVzdHMvY3NzL2Nzcy1jb250YWluL2NvbnRhaW4t cGFpbnQtMDQ5LWV4cGVjdGVkLnR4dDogQWRkZWQuCisgICAgICAgICogd2ViLXBsYXRmb3JtLXRl c3RzL2Nzcy9jc3MtY29udGFpbi9jb250YWluLXBhaW50LTA0OS5odG1sOiBBZGRlZC4KKwogMjAy Mi0wMi0wNyAgQ2hyaXMgRHVtZXogIDxjZHVtZXpAYXBwbGUuY29tPgogCiAgICAgICAgIEFkZCBz dXBwb3J0IGZvciBzaGFyaW5nIFNoYXJlZCBXb3JrZXJzIChpbmNsdWRpbmcgYWNyb3NzIFdlYlBy b2Nlc3NlcykKZGlmZiAtLWdpdCBhL0xheW91dFRlc3RzL2ltcG9ydGVkL3czYy93ZWItcGxhdGZv cm0tdGVzdHMvY3NzL2Nzcy1jb250YWluL2NvbnRhaW4tcGFpbnQtMDQ5LWV4cGVjdGVkLnR4dCBi L0xheW91dFRlc3RzL2ltcG9ydGVkL3czYy93ZWItcGxhdGZvcm0tdGVzdHMvY3NzL2Nzcy1jb250 YWluL2NvbnRhaW4tcGFpbnQtMDQ5LWV4cGVjdGVkLnR4dApuZXcgZmlsZSBtb2RlIDEwMDY0NApp bmRleCAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwLi4xY2NiMDQ1OTZj MjRjMjZlOGNhNWFlMDlkMTNkZmUzNzk1Njg4MDQ4Ci0tLSAvZGV2L251bGwKKysrIGIvTGF5b3V0 VGVzdHMvaW1wb3J0ZWQvdzNjL3dlYi1wbGF0Zm9ybS10ZXN0cy9jc3MvY3NzLWNvbnRhaW4vY29u dGFpbi1wYWludC0wNDktZXhwZWN0ZWQudHh0CkBAIC0wLDAgKzEsMyBAQAorCitQQVNTIFNjcm9s bGluZyBvdmVyZmxvdyB3b3JrcyB3aGVuIHBhaW50IGlzIGNvbnRhaW5lZAorCmRpZmYgLS1naXQg YS9MYXlvdXRUZXN0cy9pbXBvcnRlZC93M2Mvd2ViLXBsYXRmb3JtLXRlc3RzL2Nzcy9jc3MtY29u dGFpbi9jb250YWluLXBhaW50LTA0OS5odG1sIGIvTGF5b3V0VGVzdHMvaW1wb3J0ZWQvdzNjL3dl Yi1wbGF0Zm9ybS10ZXN0cy9jc3MvY3NzLWNvbnRhaW4vY29udGFpbi1wYWludC0wNDkuaHRtbApu ZXcgZmlsZSBtb2RlIDEwMDY0NAppbmRleCAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAw MDAwMDAwMDAwLi40OWNkYzliZWNhMDljOWRiZjY2NjA3MzQyYmE4OTM2YzZhODE3MjI1Ci0tLSAv ZGV2L251bGwKKysrIGIvTGF5b3V0VGVzdHMvaW1wb3J0ZWQvdzNjL3dlYi1wbGF0Zm9ybS10ZXN0 cy9jc3MvY3NzLWNvbnRhaW4vY29udGFpbi1wYWludC0wNDkuaHRtbApAQCAtMCwwICsxLDM0IEBA Cis8IURPQ1RZUEUgaHRtbD4KKzxtZXRhIGNoYXJzZXQ9InV0ZjgiPgorPHRpdGxlPkNTUyBDb250 YWlubWVudCBUZXN0OiBTY3JvbGxpbmcgb3ZlcmZsb3cgd29ya3Mgd2hlbiBwYWludCBpcyBjb250 YWluZWQiPC90aXRsZT4KKzxsaW5rIHJlbD0iaGVscCIgaHJlZj0iaHR0cHM6Ly9kcmFmdHMuY3Nz d2cub3JnL2Nzcy1jb250YWluLTEvI2NvbnRhaW5tZW50LXBhaW50Ij4KKzxtZXRhIG5hbWU9ImFz c2VydCIgY29udGVudD0iU2Nyb2xsaW5nIG92ZXJmbG93IHdvcmtzIHdoZW4gcGFpbnQgaXMgY29u dGFpbmVkLiI+CisKKzxzY3JpcHQgc3JjPSIvcmVzb3VyY2VzL3Rlc3RoYXJuZXNzLmpzIj48L3Nj cmlwdD4KKzxzY3JpcHQgc3JjPSIvcmVzb3VyY2VzL3Rlc3RoYXJuZXNzcmVwb3J0LmpzIj48L3Nj cmlwdD4KKworPHN0eWxlPgorI2NvbnRhaW5lciB7CisgIHdpZHRoOiAxMDBweDsKKyAgaGVpZ2h0 OiAxMDBweDsKKyAgb3ZlcmZsb3c6IGF1dG87CisgIGNvbnRhaW46IHBhaW50OworfQorLmNvbnRl bnQgeworICBwb3NpdGlvbjogYWJzb2x1dGU7CisgIGhlaWdodDogNTAwJTsKKyAgd2lkdGg6IDEw MCU7Cit9Cis8L3N0eWxlPgorCis8ZGl2IGlkPSJjb250YWluZXIiPgorICA8ZGl2IGNsYXNzPSJj b250ZW50Ij4KKyAgPC9kaXY+Cis8L2Rpdj4KKworPHNjcmlwdD4KKyAgdGVzdCgoKSA9PiB7Cisg ICAgY29udGFpbmVyLnNjcm9sbFRvKDAsIDEwMCk7CisgICAgYXNzZXJ0X2VxdWFscyhjb250YWlu ZXIuc2Nyb2xsVG9wLCAxMDApOworICB9LCAiU2Nyb2xsaW5nIG92ZXJmbG93IHdvcmtzIHdoZW4g cGFpbnQgaXMgY29udGFpbmVkIik7Cis8L3NjcmlwdD4K