| Summary: | script type="module" doesn't wait for CSS | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Rene Haas <king-sora> | ||||
| Component: | Page Loading | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | beidson, cdumez, karlcow, webkit-bug-importer, ysuzuki | ||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
| Version: | Safari 17 | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| Attachments: |
|
||||||
Created attachment 467721 [details] Minimal reproducable example When using a script with `type="module"` I would expect the script to be deferred until CSS is parsed and executed. (same behavior as with the `defer` attribute) In webkit this doesn't happen. I've attached a minimal example. Open it in browsers such as Firefox or Chrome and the result will be always the same: The `div` element will always have its color (red / rgb(255, 0, 0)) as its text. In WebKit / Safari this won't be always the case (to reproduce it consistently disable cache in the network devtools). The example looks like this: ===================== index.html: ===================== <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div></div> <script type="module"> document.querySelector('div').innerHTML = getComputedStyle(document.querySelector('div')).backgroundColor; </script> </body> </html> ===================== styles.css ===================== div { width: 200px; height: 200px; background: red; } One important note to make here is that if I switch out `type="module"` with `defer` everything works as expected.