226574 2021-06-03 02:41:58 -0700 REGRESSION (r276882): custom properties not available on host on initial paint 2021-06-04 11:52:38 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Unspecified Unspecified RESOLVED FIXED InRadar P2 Critical --- 1 vb webkit-unassigned bfulgham koivisto sam simon.fraser webkit-bug-importer zalan oldest_to_newest 1766334 0 vb 2021-06-03 02:41:58 -0700 With multiple shadow doms sharing a stylesheet their custom properties defined on the :host element are not available on first paint. This leads to incorrect layout on first paint. When hovering over such an element a repaint occurs where the custom properties are now available and a flash occurs. When there is only one shadow dom the problem does not exist. A reproduction can be visited under https://realityfilter.github.io/safari-custom-properties-regression/ The github repo is https://github.com/realityfilter/safari-custom-properties-regression Sometimes you have to clear the caches before reloading the page to see this bug. The current Safari 14.4.1 does not have this bug. This should have a huge impact on current frameworks like ionic, although I have not tested it, yet. Simple external CSS: ```css :host, :root { --background-color: red; } div { background-color: var(--background-color); border: 1px solid black; } ``` Javascript: ```js const attachApp = (element) => { const root = element.attachShadow({mode: "open"}) const style = document.createElement('link') style.rel= 'stylesheet' style.href = './app.css' root.append(style) const div = document.createElement('div') const p = document.createElement('p') p.textContent = 'I should have a red background' div.append(p) root.append(div) } document.querySelectorAll('.app').forEach(attachApp) ``` ```html <head> </head> <body>  <div class="app"></div>  <div class="app"></div> <script type="module" src="./app.js"></script> </body> ``` 1766335 1 vb 2021-06-03 02:43:53 -0700 I think the bug was introduced in Safari Technology Preview 125. 1766731 2 webkit-bug-importer 2021-06-04 04:10:55 -0700 <rdar://problem/78863643> 1766732 3 koivisto 2021-06-04 04:15:44 -0700 Looks like a style invalidation issue with external stylesheets in a shadow tree. 1766734 4 vb 2021-06-04 04:29:15 -0700 We noticed it on a larger project. Some parts of the stylesheet are applied. E.g the black border in the example is in place even on first paint. 1766736 5 koivisto 2021-06-04 05:00:09 -0700 Right, it looks like variables are not being inherited to the shadow tree correctly. 1766761 6 koivisto 2021-06-04 07:47:50 -0700 The issue is that we fail to invalidate the shadow host style when switching from empty shared style resolver to non-empty one. Variables set on the host won't be resolved and fail to inherit to the shadow trees. 1766778 7 430581 koivisto 2021-06-04 08:40:09 -0700 Created attachment 430581 patch 1766833 8 430581 simon.fraser 2021-06-04 10:38:15 -0700 Comment on attachment 430581 patch View in context: https://bugs.webkit.org/attachment.cgi?id=430581&action=review > Source/WebCore/style/StyleInvalidator.cpp:393 > + if (!resolver) > + return true; Would it be simpler to do the !resolver check and invalidations up-front? 1766848 9 koivisto 2021-06-04 11:19:14 -0700 > Would it be simpler to do the !resolver check and invalidations up-front? I suppose the invalidation could go to helper lambdas but I feel this is pretty readable as-is. 1766849 10 koivisto 2021-06-04 11:19:59 -0700 Thanks for a good test case vb@bigdot.de! 1766861 11 ews-feeder 2021-06-04 11:52:34 -0700 Committed r278478 (238496@main): <https://commits.webkit.org/238496@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 430581. 430581 2021-06-04 08:40:09 -0700 2021-06-04 11:52:36 -0700 patch shared-resolver-host-invalidation.patch text/plain 5677 koivisto ZGlmZiAtLWdpdCBhL0xheW91dFRlc3RzL0NoYW5nZUxvZyBiL0xheW91dFRlc3RzL0NoYW5nZUxv ZwppbmRleCBjYzdlZWQ2ODQ2NmUuLjVhMmQzYzUxNTQxMyAxMDA2NDQKLS0tIGEvTGF5b3V0VGVz dHMvQ2hhbmdlTG9nCisrKyBiL0xheW91dFRlc3RzL0NoYW5nZUxvZwpAQCAtMSwzICsxLDE3IEBA CisyMDIxLTA2LTA0ICBBbnR0aSBLb2l2aXN0byAgPGFudHRpQGFwcGxlLmNvbT4KKworICAgICAg ICBSRUdSRVNTSU9OIChtYXliZSByMjc2ODgyKTogY3VzdG9tIHByb3BlcnRpZXMgbm90IGF2YWls YWJsZSBvbiBob3N0IG9uIGluaXRpYWwgcGFpbnQKKyAgICAgICAgaHR0cHM6Ly9idWdzLndlYmtp dC5vcmcvc2hvd19idWcuY2dpP2lkPTIyNjU3NAorICAgICAgICA8cmRhcjovL3Byb2JsZW0vNzg4 NjM2NDM+CisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9CT0RZIChPT1BTISkuCisKKyAgICAgICAg KiBmYXN0L3NoYWRvdy1kb20vcmVzb3VyY2VzL3NoYXJlZC1yZXNvbHZlci1ob3N0LWludmFsaWRh dGlvbi5jc3M6IEFkZGVkLgorICAgICAgICAoOmhvc3QsKToKKyAgICAgICAgKGRpdik6CisgICAg ICAgICogZmFzdC9zaGFkb3ctZG9tL3NoYXJlZC1yZXNvbHZlci1ob3N0LWludmFsaWRhdGlvbi1l eHBlY3RlZC5odG1sOiBBZGRlZC4KKyAgICAgICAgKiBmYXN0L3NoYWRvdy1kb20vc2hhcmVkLXJl c29sdmVyLWhvc3QtaW52YWxpZGF0aW9uLmh0bWw6IEFkZGVkLgorCiAyMDIxLTA2LTAzICBBbGFu IEJ1anRhcyAgPHphbGFuQGFwcGxlLmNvbT4KIAogICAgICAgICBDcmFjayBpbiBoZXJvIHRleHQg b24gaHR0cHM6Ly93d3cuYXBwbGUuY29tL21hYy1taW5pLwpkaWZmIC0tZ2l0IGEvTGF5b3V0VGVz dHMvZmFzdC9zaGFkb3ctZG9tL3Jlc291cmNlcy9zaGFyZWQtcmVzb2x2ZXItaG9zdC1pbnZhbGlk YXRpb24uY3NzIGIvTGF5b3V0VGVzdHMvZmFzdC9zaGFkb3ctZG9tL3Jlc291cmNlcy9zaGFyZWQt cmVzb2x2ZXItaG9zdC1pbnZhbGlkYXRpb24uY3NzCm5ldyBmaWxlIG1vZGUgMTAwNjQ0CmluZGV4 IDAwMDAwMDAwMDAwMC4uYTQ3MGI4ZjlmODI0Ci0tLSAvZGV2L251bGwKKysrIGIvTGF5b3V0VGVz dHMvZmFzdC9zaGFkb3ctZG9tL3Jlc291cmNlcy9zaGFyZWQtcmVzb2x2ZXItaG9zdC1pbnZhbGlk YXRpb24uY3NzCkBAIC0wLDAgKzEsOSBAQAorOmhvc3QsCis6cm9vdCB7CisgIC0tYmFja2dyb3Vu ZC1jb2xvcjogcmVkOworfQorCitkaXYgeworICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNr Z3JvdW5kLWNvbG9yKTsKKyAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7Cit9CmRpZmYgLS1naXQg YS9MYXlvdXRUZXN0cy9mYXN0L3NoYWRvdy1kb20vc2hhcmVkLXJlc29sdmVyLWhvc3QtaW52YWxp ZGF0aW9uLWV4cGVjdGVkLmh0bWwgYi9MYXlvdXRUZXN0cy9mYXN0L3NoYWRvdy1kb20vc2hhcmVk LXJlc29sdmVyLWhvc3QtaW52YWxpZGF0aW9uLWV4cGVjdGVkLmh0bWwKbmV3IGZpbGUgbW9kZSAx MDA2NDQKaW5kZXggMDAwMDAwMDAwMDAwLi5jYzMzYjQ0OTllZjgKLS0tIC9kZXYvbnVsbAorKysg Yi9MYXlvdXRUZXN0cy9mYXN0L3NoYWRvdy1kb20vc2hhcmVkLXJlc29sdmVyLWhvc3QtaW52YWxp ZGF0aW9uLWV4cGVjdGVkLmh0bWwKQEAgLTAsMCArMSwxNiBAQAorPGhlYWQ+Cis8c3R5bGU+Cisu YXBwIGRpdiB7CisgICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7CisgICAgQmFja2dyb3VuZC1j b2xvcjogcmVkOworfQorPC9zdHlsZT4KKzwvaGVhZD4KKzxib2R5PgorICAgIDxkaXYgY2xhc3M9 ImFwcCI+CisgICAgICAgIDxkaXY+PHA+SSBzaG91bGQgaGF2ZSBhIHJlZCBiYWNrZ3JvdW5kPC9w PjwvZGl2PgorICAgIDwvZGl2PgorICAgIDxkaXYgY2xhc3M9ImFwcCI+CisgICAgICAgIDxkaXY+ PHA+SSBzaG91bGQgaGF2ZSBhIHJlZCBiYWNrZ3JvdW5kPC9wPjwvZGl2PgorICAgIDwvZGl2Pgor PC9ib2R5PgpkaWZmIC0tZ2l0IGEvTGF5b3V0VGVzdHMvZmFzdC9zaGFkb3ctZG9tL3NoYXJlZC1y ZXNvbHZlci1ob3N0LWludmFsaWRhdGlvbi5odG1sIGIvTGF5b3V0VGVzdHMvZmFzdC9zaGFkb3ct ZG9tL3NoYXJlZC1yZXNvbHZlci1ob3N0LWludmFsaWRhdGlvbi5odG1sCm5ldyBmaWxlIG1vZGUg MTAwNjQ0CmluZGV4IDAwMDAwMDAwMDAwMC4uOWYzYjA3Nzg2NmY1Ci0tLSAvZGV2L251bGwKKysr IGIvTGF5b3V0VGVzdHMvZmFzdC9zaGFkb3ctZG9tL3NoYXJlZC1yZXNvbHZlci1ob3N0LWludmFs aWRhdGlvbi5odG1sCkBAIC0wLDAgKzEsMjQgQEAKKzxoZWFkPgorPC9oZWFkPgorPGJvZHk+Cisg ICAgPGRpdiBjbGFzcz0iYXBwIj48L2Rpdj4KKyAgICA8IS0tIG9ubHkgb25lIGVsZW1lbnQgaXMg ZmluZSAtLT4KKyAgICA8ZGl2IGNsYXNzPSJhcHAiPjwvZGl2PgorICAgIDxzY3JpcHQ+CisgICAg ICAgIGNvbnN0IGF0dGFjaEFwcCA9IChlbGVtZW50KSA9PiB7CisgICAgICAgICAgICBjb25zdCBy b290ID0gZWxlbWVudC5hdHRhY2hTaGFkb3coe21vZGU6ICJvcGVuIn0pCisKKyAgICAgICAgICAg IGNvbnN0IHN0eWxlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpCisgICAgICAgICAg ICBzdHlsZS5yZWw9ICdzdHlsZXNoZWV0JworICAgICAgICAgICAgc3R5bGUuaHJlZiA9ICdyZXNv dXJjZXMvc2hhcmVkLXJlc29sdmVyLWhvc3QtaW52YWxpZGF0aW9uLmNzcycKKyAgICAgICAgICAg IHJvb3QuYXBwZW5kKHN0eWxlKQorCisgICAgICAgICAgICBjb25zdCBkaXYgPSBkb2N1bWVudC5j cmVhdGVFbGVtZW50KCdkaXYnKQorICAgICAgICAgICAgY29uc3QgcCA9IGRvY3VtZW50LmNyZWF0 ZUVsZW1lbnQoJ3AnKQorICAgICAgICAgICAgcC50ZXh0Q29udGVudCA9ICdJIHNob3VsZCBoYXZl IGEgcmVkIGJhY2tncm91bmQnCisgICAgICAgICAgICBkaXYuYXBwZW5kKHApCisgICAgICAgICAg ICByb290LmFwcGVuZChkaXYpCisgICAgICAgIH0KKyAgICAgICAgZG9jdW1lbnQucXVlcnlTZWxl Y3RvckFsbCgnLmFwcCcpLmZvckVhY2goYXR0YWNoQXBwKQorICAgIDwvc2NyaXB0PgorPC9ib2R5 PgpkaWZmIC0tZ2l0IGEvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nIGIvU291cmNlL1dlYkNvcmUv Q2hhbmdlTG9nCmluZGV4IDEyNGRlZjE0MzFjZS4uMmYxZDU5ZGE4ZTEyIDEwMDY0NAotLS0gYS9T b3VyY2UvV2ViQ29yZS9DaGFuZ2VMb2cKKysrIGIvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nCkBA IC0xLDMgKzEsMjYgQEAKKzIwMjEtMDYtMDQgIEFudHRpIEtvaXZpc3RvICA8YW50dGlAYXBwbGUu Y29tPgorCisgICAgICAgIFJFR1JFU1NJT04gKG1heWJlIHIyNzY4ODIpOiBjdXN0b20gcHJvcGVy dGllcyBub3QgYXZhaWxhYmxlIG9uIGhvc3Qgb24gaW5pdGlhbCBwYWludAorICAgICAgICBodHRw czovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/aWQ9MjI2NTc0CisgICAgICAgIDxyZGFy Oi8vcHJvYmxlbS83ODg2MzY0Mz4KKworICAgICAgICBSZXZpZXdlZCBieSBOT0JPRFkgKE9PUFMh KS4KKworICAgICAgICBXZSBmYWlsIHRvIGludmFsaWRhdGUgOmhvc3Qgc3R5bGUgd2hlbiBzd2l0 Y2hpbmcgb3V0IG9mIHNoYXJlZCByZXNvbHZlciBhZnRlciBhc3luY2hyb25vdXNseQorICAgICAg ICBsb2FkaW5nIGEgc3R5bGVzaGVldCBpbnRvIGEgc2hhZG93IHRyZWUuIFRoaXMgaGFwcGVucyBi ZWNhdXNlIHRoZSByZXNvbHZlciBoYXMgYmVlbiBjbGVhcmVkIGFuZAorICAgICAgICB0aGUgaW52 YWxpZGF0aW9uIGNvZGUganVzdCBiYWlscyBvdXQgaWYgbm9uZSBpcyBwcmVzZW50LgorCisgICAg ICAgIFRlc3QgY2FzZSBieSB2YkBiaWdkb3QuZGUuCisKKyAgICAgICAgVGVzdDogZmFzdC9zaGFk b3ctZG9tL3NoYXJlZC1yZXNvbHZlci1ob3N0LWludmFsaWRhdGlvbi5odG1sCisKKyAgICAgICAg KiBzdHlsZS9TdHlsZUludmFsaWRhdG9yLmNwcDoKKyAgICAgICAgKFdlYkNvcmU6OlN0eWxlOjpJ bnZhbGlkYXRvcjo6aW52YWxpZGF0ZUhvc3RBbmRTbG90dGVkU3R5bGVJZk5lZWRlZCk6CisKKyAg ICAgICAgQ2hhbmdlIHRoZSBhc3N1bXB0aW9uIHNvIHRoYXQgaWYgd2UgZG9uJ3QgaGF2ZSBhIHJl c29sdmVyIHdlIGFsd2F5cyBpbnZhbGlkYXRlIHRoZSBob3N0LgorICAgICAgICBUaGUgYWx0ZXJu YXRpdmUgd291bGQgYmUgdG8gYnVpbGQgdGhlIHJlc29sdmVyIGFuZCBkbyB0aGlzIGFjY3VyYXRl bHkgYnV0IGRvaW5nIHRoYXQgaGVyZQorICAgICAgICBzZWVtcyBiaXQgcmlza3kuIFRoaXMgc2hv dWxkIGJlIGNoZWFwIGFuZCByYXJlIGludmFsaWRhdGlvbiBpbiBhbnkgY2FzZS4KKwogMjAyMS0w NS0yNyAgU2VyZ2lvIFZpbGxhciBTZW5pbiAgPHN2aWxsYXJAaWdhbGlhLmNvbT4KIAogICAgICAg ICBbY3NzLWZsZXhib3hdIFNhbml0aXplIHRoZSBhc3BlY3QgcmF0aW8gaGFuZGxpbmcgY29kZQpk aWZmIC0tZ2l0IGEvU291cmNlL1dlYkNvcmUvc3R5bGUvU3R5bGVJbnZhbGlkYXRvci5jcHAgYi9T b3VyY2UvV2ViQ29yZS9zdHlsZS9TdHlsZUludmFsaWRhdG9yLmNwcAppbmRleCA3ZDgzOTcyMzZm MDcuLmYzOGJkNzE5M2JiMCAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNvcmUvc3R5bGUvU3R5bGVJ bnZhbGlkYXRvci5jcHAKKysrIGIvU291cmNlL1dlYkNvcmUvc3R5bGUvU3R5bGVJbnZhbGlkYXRv ci5jcHAKQEAgLTM4NywxNCArMzg3LDIzIEBAIHZvaWQgSW52YWxpZGF0b3I6OmludmFsaWRhdGVI b3N0QW5kU2xvdHRlZFN0eWxlSWZOZWVkZWQoU2hhZG93Um9vdCYgc2hhZG93Um9vdCkKIHsKICAg ICBhdXRvJiBob3N0ID0gKnNoYWRvd1Jvb3QuaG9zdCgpOwogICAgIGF1dG8qIHJlc29sdmVyID0g c2hhZG93Um9vdC5zdHlsZVNjb3BlKCkucmVzb2x2ZXJJZkV4aXN0cygpOwotICAgIGlmICghcmVz b2x2ZXIpCi0gICAgICAgIHJldHVybjsKLSAgICBhdXRvJiBhdXRob3JTdHlsZSA9IHJlc29sdmVy LT5ydWxlU2V0cygpLmF1dGhvclN0eWxlKCk7CiAKLSAgICBpZiAoIWF1dGhvclN0eWxlLmhvc3RQ c2V1ZG9DbGFzc1J1bGVzKCkuaXNFbXB0eSgpKQorICAgIGF1dG8gc2hvdWxkSW52YWxpZGF0ZUhv c3QgPSBbJl0geworICAgICAgICBpZiAoIXJlc29sdmVyKQorICAgICAgICAgICAgcmV0dXJuIHRy dWU7CisgICAgICAgIHJldHVybiAhcmVzb2x2ZXItPnJ1bGVTZXRzKCkuYXV0aG9yU3R5bGUoKS5o b3N0UHNldWRvQ2xhc3NSdWxlcygpLmlzRW1wdHkoKTsKKyAgICB9KCk7CisKKyAgICBpZiAoc2hv dWxkSW52YWxpZGF0ZUhvc3QpCiAgICAgICAgIGhvc3QuaW52YWxpZGF0ZVN0eWxlSW50ZXJuYWwo KTsKIAotICAgIGlmICghYXV0aG9yU3R5bGUuc2xvdHRlZFBzZXVkb0VsZW1lbnRSdWxlcygpLmlz RW1wdHkoKSkgeworICAgIGF1dG8gc2hvdWxkSW52YWxpZGF0ZUhvc3RDaGlsZHJlbiA9IFsmXSB7 CisgICAgICAgIGlmICghcmVzb2x2ZXIpCisgICAgICAgICAgICByZXR1cm4gdHJ1ZTsKKyAgICAg ICAgcmV0dXJuICFyZXNvbHZlci0+cnVsZVNldHMoKS5hdXRob3JTdHlsZSgpLnNsb3R0ZWRQc2V1 ZG9FbGVtZW50UnVsZXMoKS5pc0VtcHR5KCk7CisgICAgfSgpOworCisgICAgaWYgKHNob3VsZElu dmFsaWRhdGVIb3N0Q2hpbGRyZW4pIHsKICAgICAgICAgZm9yIChhdXRvJiBzaGFkb3dDaGlsZCA6 IGNoaWxkcmVuT2ZUeXBlPEVsZW1lbnQ+KGhvc3QpKQogICAgICAgICAgICAgc2hhZG93Q2hpbGQu aW52YWxpZGF0ZVN0eWxlSW50ZXJuYWwoKTsKICAgICB9Cg==