[Webkit-unassigned] [Bug 261655] New: script type="module" doesnt wait for CSS

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Sun Sep 17 10:43:59 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=261655

            Bug ID: 261655
           Summary: script type="module" doesnt wait for CSS
           Product: WebKit
           Version: Safari 17
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Page Loading
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: king-sora at hotmail.de
                CC: beidson at apple.com

Created attachment 467721

  --> https://bugs.webkit.org/attachment.cgi?id=467721&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230917/dbe93f2c/attachment.htm>


More information about the webkit-unassigned mailing list