264954 2023-11-16 07:55:48 -0800 Controlling layer size through scaling contexts is inconsistent when there are child layers. 2023-11-23 07:56:12 -0800 1 1 1 Unclassified WebKit Compositing Safari 15 Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=27684 InRadar P2 Normal --- 1 onne webkit-unassigned simon.fraser webkit-bug-importer oldest_to_newest 1993114 0 468619 onne 2023-11-16 07:55:48 -0800 Created attachment 468619 Small testcase. Zoom with +/-. Toggle content layer with spacebar. We use a zooming setup, and to keep things sharp, do: 1. a global transform to zoom in or out (adding will-change: transform) 2. zoom content layers to match the size they are displayed at (adding will-change: transform) 3. zoom an inner layer back down to not distort actual content (no will-change) 4. actual content Which works great normally. Element 1 becomes a transformation layer, element 2 becomes a layer backed by the appropriate amount of pixels. As users zoom, we sometimes switch the size and scale of that layer. Until the content contains layers itself (backdrop filters, or simply will-change: transform set), then element 3 becomes a layer on its own, and it's amount of backing pixels is insufficient, making everything blurry. This is unexpected and inconsistent. This setup works in all other browsers. (It works also in Firefox, though it doesn't use layers like this.) I suspect that in Safari 14 this setup works, but I cannot test this, it used to work. In Safari 15.6 and Safari 16 that element 3 becoming a layer is unavoidable. One workaround is to use `zoom: X` instead of `transform: scale(X)` for 3, except that texts don't behave the same at all zoom levels. See the attachment for a minimal setup. If you turn on "Show Compositing Borders" in the inspector layer panel, you can see what is happening. 1993236 1 simon.fraser 2023-11-16 13:51:20 -0800 I think this is bug 27684 ? 1993367 2 onne 2023-11-17 00:54:58 -0800 It could be that any fix to https://bugs.webkit.org/show_bug.cgi?id=27684 fixes our situation as well. Basically, you'd expect a layer from this: <div style="transform: translateZ(0.1px) scale(4); transform-origin: 0 0;">Blurry</div> To get a backing buffer that is 4 * width x 4 * height, which it does on Chrome, but not on Safari. But the case for this report is different. There is a correctly sized and scaled layer with backing buffer. But the moment a child layer appears, an implicit layer is created. While: - That implicit layer is not necessary, as it can merge with the layer of its direct parent. Instead, now it turns that parent layer from one with a backing buffer, to one that is just a transformation layer. - And, to add insult to injury, that implicit layer has a badly sized backing buffer. Likely because of that scale bug, though, technically, we scale that layer down, so maybe, despite that bug, it does get the right size, just not a suitable size. Note that because of this, for our editor at http://framer.com, can only be used for "simpler" documents. The moment clients use things with layers, zooming in makes everything look blurry and unusable. I cannot test older version of Safari, but I strongly suspect the problem was introduced in Safari 15.6. 1994549 3 webkit-bug-importer 2023-11-23 07:56:12 -0800 <rdar://problem/118748860> 468619 2023-11-16 07:55:48 -0800 2023-11-16 07:55:48 -0800 Small testcase. Zoom with +/-. Toggle content layer with spacebar. index.html text/html 4992 onne PCEtLSBydW4gd2l0aCBgcGFyY2VsIGluZGV4Lmh0bWxgIGZvciBob3QgcmVsb2FkIHdoaWxlIGVk aXRpbmcgLS0+CjxzdHlsZT4KICAgICNjb250YWluZXIgewogICAgICAgIHBvc2l0aW9uOiBhYnNv bHV0ZTsKICAgICAgICBiYWNrZ3JvdW5kOiBsaWdodGdyYXk7CiAgICAgICAgaW5zZXQ6IDA7CiAg ICAgICAgb3ZlcmZsb3c6IGhpZGRlbjsKICAgIH0KCiAgICAjY2FudmFzIHsKICAgICAgICBwb3Np dGlvbjogYWJzb2x1dGU7CiAgICAgICAgdG9wOiAwOwogICAgICAgIGxlZnQ6IDA7CiAgICAgICAg d2lkdGg6IDA7CiAgICAgICAgaGVpZ2h0OiAwOwogICAgICAgIHdpbGwtY2hhbmdlOiB0cmFuc2Zv cm07CiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7CiAgICB9CgogICAgI3RpbGVX cmFwcGVyIHsKICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgd2lsbC1jaGFuZ2U6 IHRyYW5zZm9ybTsKICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiB0b3AgbGVmdDsKICAgIH0KCiAg ICAjdGlsZUlubmVyIHsKICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiB0b3AgbGVmdDsKICAgIH0K PC9zdHlsZT4KCjxkaXYgaWQ9ImNvbnRhaW5lciI+CiAgICA8ZGl2IGlkPSJjYW52YXMiPgogICAg ICAgIDxkaXYgaWQ9InRpbGVXcmFwcGVyIj4KICAgICAgICAgICAgPGRpdiBpZD0idGlsZUlubmVy IiBzdHlsZT0iYmFja2dyb3VuZDogd2hpdGUiPgogICAgICAgICAgICAgICAgQ09OVEVOVAogICAg ICAgICAgICAgICAgPGJyIC8+bW92ZSB3aXRoIGN1cnNvciBrZXlzIDxiciAvPnpvb20gd2l0aCAr Ly0sIG9yIDEvMgogICAgICAgICAgICAgICAgPGRpdgogICAgICAgICAgICAgICAgICAgIGlkPSJj b250ZW50V2lsbENoYW5nZSIKICAgICAgICAgICAgICAgICAgICBzdHlsZT0iCiAgICAgICAgICAg ICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgICAgICAgICAgICAg d2lkdGg6IDEyNXB4OwogICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDc1cHg7CiAgICAg ICAgICAgICAgICAgICAgICAgIHRvcDogNjBweDsKICAgICAgICAgICAgICAgICAgICAgICAgbGVm dDogMjVweDsKICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogbGlnaHR5ZWxsb3c7 CiAgICAgICAgICAgICAgICAgICAgICAgIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07CiAgICAgICAg ICAgICAgICAgICAgIgogICAgICAgICAgICAgICAgPgogICAgICAgICAgICAgICAgICAgIExBWUVS CiAgICAgICAgICAgICAgICAgICAgPGJyIC8+dG9nZ2xlIGxheWVyIG9uL29mZiB3aXRoIHNwYWNl YmFyCiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9k aXY+CiAgICA8L2Rpdj4KPC9kaXY+Cgo8c2NyaXB0PgogICAgY29uc3QgY2FudmFzID0gZG9jdW1l bnQuZ2V0RWxlbWVudEJ5SWQoImNhbnZhcyIpCiAgICBjb25zdCB0aWxlV3JhcHBlciA9IGRvY3Vt ZW50LmdldEVsZW1lbnRCeUlkKCJ0aWxlV3JhcHBlciIpCiAgICBjb25zdCB0aWxlSW5uZXIgPSBk b2N1bWVudC5nZXRFbGVtZW50QnlJZCgidGlsZUlubmVyIikKCiAgICBjb25zdCBzdGF0ZSA9IHsK ICAgICAgICBvZmZzZXRYOiAxMDAsCiAgICAgICAgb2Zmc2V0WTogMTAwLAogICAgICAgIHpvb206 IDEsCiAgICAgICAgc2NhbGU6IC0xLAogICAgfQoKICAgIGNvbnN0IG5vZGUgPSB7CiAgICAgICAg eDogMCwKICAgICAgICB5OiAwLAogICAgICAgIHdpZHRoOiAyMDAsCiAgICAgICAgaGVpZ2h0OiAy MDAsCiAgICB9CgogICAgZnVuY3Rpb24gc2NhbGVGcm9tWm9vbSh6b29tKSB7CiAgICAgICAgaWYg KHpvb20gPD0gMC4wNjI1KSByZXR1cm4gMC4wNjI1CiAgICAgICAgaWYgKHpvb20gPD0gMC4xMjUp IHJldHVybiAwLjEyNQogICAgICAgIGlmICh6b29tIDw9IDAuMjUpIHJldHVybiAwLjI1CiAgICAg ICAgaWYgKHpvb20gPD0gMC41KSByZXR1cm4gMC41CiAgICAgICAgaWYgKHpvb20gPD0gMSkgcmV0 dXJuIDEKICAgICAgICBpZiAoem9vbSA8PSAxLjUpIHJldHVybiAxLjUKICAgICAgICBpZiAoem9v bSA8PSAyKSByZXR1cm4gMgogICAgICAgIGlmICh6b29tIDw9IDQpIHJldHVybiA0CiAgICAgICAg aWYgKHpvb20gPD0gOCkgcmV0dXJuIDgKICAgICAgICBpZiAoem9vbSA8PSAxNikgcmV0dXJuIDE2 CiAgICAgICAgcmV0dXJuIDMyCiAgICB9CgogICAgbGV0IGxhc3RSZW5kZXJTY2FsZSA9IC0xCiAg ICBmdW5jdGlvbiByZW5kZXIoKSB7CiAgICAgICAgY29uc3QgdHJhbnNsYXRlWCA9IHN0YXRlLm9m ZnNldFgKICAgICAgICBjb25zdCB0cmFuc2xhdGVZID0gc3RhdGUub2Zmc2V0WQogICAgICAgIGNh bnZhcy5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWCgke3RyYW5zbGF0ZVh9cHgpIHRyYW5z bGF0ZVkoJHt0cmFuc2xhdGVZfXB4KSBzY2FsZSgke3N0YXRlLnpvb219KWAKCiAgICAgICAgLy8g V2hlbiB6b29tZWQgb3V0LCB3ZSBtYWtlIHRoZSB0aWxlIHdyYXBwZXIgc21hbGxlciBpbiB3aWR0 aCBhbmQgaGVpZ2h0LCBtYWtpbmcgaXQgZml0IGJ5CiAgICAgICAgLy8gYWxzbyBzY2FsaW5nIHRo ZSBjb250ZW50IGRvd24uIFRoZSBpbm5lciB0aWxlIHdpbGwgdGhlbiBzY2FsZSBpdCBiYWNrIHRv IG5vcm1hbC4KICAgICAgICAvLyBPdGhlcndpc2UsIGFzIHdlIHBvdGVudGlhbGx5IHpvb20gb3V0 IHRvIHNob3cgaHVuZHJlZHMgb2Ygc3VjaCB0aWxlcywgdGhleSBhbGwgdGFrZSB1cAogICAgICAg IC8vIGxhcmdlIEdQVSB0ZXh0dXJlcy4gV2hlbiB6b29taW5nIGluLCB3ZSBkbyB0aGUgb3Bwb3Np dGUsIHdoaWNoIGtlZXBzIHRoaW5ncyBzaGFycC4gV2hpbGUKICAgICAgICAvLyB0aWxlcyB0aGF0 IGdvIG91dCBvZiB0aGUgdmlld3BvcnQgd2Ugc2NhbGUgZG93biBhbmQgaGlkZS4KCiAgICAgICAg Ly8gT25seSBzd2l0Y2ggYXQgY2VydGFpbiBzY2FsZXMsIGluc3RlYWQgb2Ygc3dpdGNoaW5nIGFs bCB0aGUgdGltZS4KICAgICAgICBjb25zdCBzY2FsZSA9IHNjYWxlRnJvbVpvb20oc3RhdGUuem9v bSkKICAgICAgICBpZiAoc3RhdGUuc2NhbGUgIT09IHNjYWxlKSB7CiAgICAgICAgICAgIHN0YXRl LnNjYWxlID0gc2NhbGUKICAgICAgICAgICAgdGlsZVdyYXBwZXIuc3R5bGUud2lkdGggPSBgJHtu b2RlLndpZHRoICogc2NhbGV9cHhgCiAgICAgICAgICAgIHRpbGVXcmFwcGVyLnN0eWxlLmhlaWdo dCA9IGAke25vZGUuaGVpZ2h0ICogc2NhbGV9cHhgCiAgICAgICAgICAgIHRpbGVXcmFwcGVyLnN0 eWxlLndpbGxDaGFuZ2UgPSAidHJhbnNmb3JtIgogICAgICAgICAgICB0aWxlV3JhcHBlci5zdHls ZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWCgke25vZGUueH1weCkgdHJhbnNsYXRlWSgke25vZGUu eX1weCkgc2NhbGUoJHsxIC8gc2NhbGV9KWAKCiAgICAgICAgICAgIHRpbGVJbm5lci5zdHlsZS50 cmFuc2Zvcm0gPSBgc2NhbGUoJHtzY2FsZX0pYAogICAgICAgICAgICB0aWxlSW5uZXIuc3R5bGUu d2lkdGggPSBgJHtub2RlLndpZHRofXB4YAogICAgICAgICAgICB0aWxlSW5uZXIuc3R5bGUuaGVp Z2h0ID0gYCR7bm9kZS5oZWlnaHR9cHhgCiAgICAgICAgfQogICAgfQoKICAgIGxldCBzdGFydGVk RnJhbWUgPSBmYWxzZQogICAgZnVuY3Rpb24gdXBkYXRlRnJhbWUoKSB7CiAgICAgICAgaWYgKHN0 YXJ0ZWRGcmFtZSkgcmV0dXJuCgogICAgICAgIHN0YXJ0ZWRGcmFtZSA9IHRydWUKICAgICAgICBy ZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4gewogICAgICAgICAgICBzdGFydGVkRnJhbWUgPSBm YWxzZQogICAgICAgICAgICByZW5kZXIoKQogICAgICAgIH0pCiAgICB9CiAgICB1cGRhdGVGcmFt ZSgpCgogICAgZG9jdW1lbnQub25rZXlkb3duID0gKGV2ZW50KSA9PiB7CiAgICAgICAgY29uc29s ZS5sb2coImV2ZW50LmtleSIsIGV2ZW50LmtleSkKICAgICAgICB1cGRhdGVGcmFtZSgpCiAgICAg ICAgaWYgKGV2ZW50LmtleSA9PT0gIjEiKSB7CiAgICAgICAgICAgIHN0YXRlLnpvb20gPSAxCiAg ICAgICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09ICIyIikgewogICAgICAgICAgICBzdGF0ZS56 b29tID0gNQogICAgICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSAiLSIpIHsKICAgICAgICAg ICAgc3RhdGUuem9vbSAtPSAwLjI1CiAgICAgICAgICAgIGlmIChzdGF0ZS56b29tIDwgMC4yNSkg c3RhdGUuem9vbSA9IDAuMjUKICAgICAgICB9IGVsc2UgaWYgKGV2ZW50LmtleSA9PT0gIj0iKSB7 CiAgICAgICAgICAgIHN0YXRlLnpvb20gKz0gMC4yNQogICAgICAgICAgICBpZiAoc3RhdGUuem9v bSA+IDMyKSBzdGF0ZS56b29tID0gMzIKICAgICAgICB9IGVsc2UgaWYgKGV2ZW50LmtleSA9PSAi QXJyb3dMZWZ0IikgewogICAgICAgICAgICBzdGF0ZS5vZmZzZXRYIC09IDEwCiAgICAgICAgfSBl bHNlIGlmIChldmVudC5rZXkgPT0gIkFycm93UmlnaHQiKSB7CiAgICAgICAgICAgIHN0YXRlLm9m ZnNldFggKz0gMTAKICAgICAgICB9IGVsc2UgaWYgKGV2ZW50LmtleSA9PSAiQXJyb3dVcCIpIHsK ICAgICAgICAgICAgc3RhdGUub2Zmc2V0WSAtPSAxMAogICAgICAgIH0gZWxzZSBpZiAoZXZlbnQu a2V5ID09ICJBcnJvd0Rvd24iKSB7CiAgICAgICAgICAgIHN0YXRlLm9mZnNldFkgKz0gMTAKICAg ICAgICB9IGVsc2UgaWYgKGV2ZW50LmtleSA9PSAiICIpIHsKICAgICAgICAgICAgY29uc3QgY29u dGVudFdpbGxDaGFuZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiY29udGVudFdpbGxDaGFu Z2UiKQogICAgICAgICAgICBpZiAoY29udGVudFdpbGxDaGFuZ2Uuc3R5bGUud2lsbENoYW5nZSA9 PSAidHJhbnNmb3JtIikgewogICAgICAgICAgICAgICAgY29udGVudFdpbGxDaGFuZ2Uuc3R5bGUu d2lsbENoYW5nZSA9ICJ1bnNldCIKICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAg IGNvbnRlbnRXaWxsQ2hhbmdlLnN0eWxlLndpbGxDaGFuZ2UgPSAidHJhbnNmb3JtIgogICAgICAg ICAgICB9CiAgICAgICAgfQogICAgfQo8L3NjcmlwdD4K