Bug 279252

Summary: Feature detection of starting styles doesn't work
Product: WebKit Reporter: Rogier de Ruijter <imbashenk>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: graouts, karlcow, koivisto, nicole, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://codepen.io/bramus/pen/QWReXaW
See Also: https://bugs.webkit.org/show_bug.cgi?id=279514
Attachments:
Description Flags
Reduction without @starting-style none

Rogier de Ruijter
Reported 2024-09-06 02:02:38 PDT
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/
Attachments
Reduction without @starting-style (363 bytes, text/html)
2024-09-10 06:53 PDT, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-09-08 19:53:38 PDT
PASS Chrome FAIL Safari, Firefox
Radar WebKit Bug Importer
Comment 2 2024-09-09 10:42:50 PDT
<rdar://problem/135557879>
Antoine Quint
Comment 3 2024-09-10 05:50:04 PDT
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".
Antoine Quint
Comment 4 2024-09-10 06:40:39 PDT
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.
Antoine Quint
Comment 5 2024-09-10 06:53:00 PDT
Created attachment 472515 [details] 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.
Antti Koivisto
Comment 6 2024-09-10 09:56:39 PDT
Looks like 271040 *** This bug has been marked as a duplicate of bug 271040 ***
Antoine Quint
Comment 7 2024-09-10 10:41:59 PDT
I think there are additional issues at play on top of bug 271040, so re-opening to debug them first.
Antti Koivisto
Comment 8 2024-09-11 06:33:27 PDT
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 ***
Antoine Quint
Comment 9 2024-09-11 07:07:15 PDT
I filed bug 279514 for the getKeyframes() / getComputedStyle() issue.
Note You need to log in before you can comment on or make changes to this bug.