279252 2024-09-06 02:02:38 -0700 Feature detection of starting styles doesn't work 2024-09-11 07:07:22 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Unspecified Unspecified RESOLVED DUPLICATE 271040 https://bugs.webkit.org/show_bug.cgi?id=279514 https://codepen.io/bramus/pen/QWReXaW BrowserCompat, InRadar P2 Normal --- 1 imbashenk webkit-unassigned graouts karlcow koivisto nicole simon.fraser webkit-bug-importer oldest_to_newest 2058149 0 imbashenk 2024-09-06 02:02:38 -0700 Using the following method to detect if starting styles are available in the browser, does work in Chrome but doesn't work in Safari. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> </body> <style> @property --supported { syntax: "<number>"; initial-value: 0; inherits: false; } :root { transition: --supported 0s calc(infinity * 1s); } @starting-style { :root { --supported: 1; } } body { background: red; } @container style(--supported: 1) { body { background: green; } </style> </html> ``` Live demo can be seen here: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/ 2058521 1 karlcow 2024-09-08 19:53:38 -0700 PASS Chrome FAIL Safari, Firefox 2058664 2 webkit-bug-importer 2024-09-09 10:42:50 -0700 <rdar://problem/135557879> 2058938 3 graouts 2024-09-10 05:50:04 -0700 It seems like we're computing the wrong "to" value for the CSS Transition here, not picking up on the `--supported` initial value and using "1" for both "from" and "to", unlike Chrome which goes from "1" to "0". 2058955 4 graouts 2024-09-10 06:40:39 -0700 Worth noting that "getComputedStyle(document.body).getPropertyValue("--supported")" returns "0", so the transition seems to apply the same way in Chrome and Safari. I wonder if the bug here is about "@container style(--supported: 1)" not working as expected. 2058960 5 472515 graouts 2024-09-10 06:53:00 -0700 Created attachment 472515 Reduction without @starting-style Attaching a test (custom-property-container-query.html) that removes @starting-style and CSS Transitions from the equation and only checks whether the container query works for the custom property and this test fails in Safari and Firefox but works in Chrome. 2059010 6 koivisto 2024-09-10 09:56:39 -0700 Looks like 271040 *** This bug has been marked as a duplicate of bug 271040 *** 2059027 7 graouts 2024-09-10 10:41:59 -0700 I think there are additional issues at play on top of bug 271040, so re-opening to debug them first. 2059281 8 koivisto 2024-09-11 06:33:27 -0700 The original reported issue appears to be fixed with https://commits.webkit.org/283480@main. Lets dupe this one for clarity and file a separate bug for the getComputedStyle() issue mentioned above. *** This bug has been marked as a duplicate of bug 271040 *** 2059287 9 graouts 2024-09-11 07:07:15 -0700 I filed bug 279514 for the getKeyframes() / getComputedStyle() issue. 472515 2024-09-10 06:53:00 -0700 2024-09-10 06:53:00 -0700 Reduction without @starting-style custom-property-container-query.html text/html 363 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KCjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9 IlVURi04Ij4KICA8dGl0bGU+UGFnZSBUaXRsZTwvdGl0bGU+CiAgPG1ldGEgbmFtZT0idmlld3Bv cnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCxpbml0aWFsLXNjYWxlPTEiPgo8L2hlYWQ+ Cgo8Ym9keT4KPC9ib2R5Pgo8c3R5bGU+CiAgOnJvb3QgewogICAgLS1zdXBwb3J0ZWQ6IDE7CiAg fQoKICBib2R5IHsKICAgIGJhY2tncm91bmQ6IHJlZDsKICB9CgogIEBjb250YWluZXIgc3R5bGUo LS1zdXBwb3J0ZWQ6IDEpIHsKICAgIGJvZHkgewogICAgICBiYWNrZ3JvdW5kOiBncmVlbjsKICAg IH0KPC9zdHlsZT4KCjwvaHRtbD4K