Bug 261655 - script type="module" doesn't wait for CSS
Summary: script type="module" doesn't wait for CSS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Page Loading (show other bugs)
Version: Safari 17
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-09-17 10:43 PDT by Rene Haas
Modified: 2023-09-24 10:44 PDT (History)
5 users (show)

See Also:


Attachments
Minimal reproducable example (570 bytes, application/x-zip-compressed)
2023-09-17 10:43 PDT, Rene Haas
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Rene Haas 2023-09-17 10:43:59 PDT
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.
Comment 1 Radar WebKit Bug Importer 2023-09-24 10:44:12 PDT
<rdar://problem/115961182>