[Webkit-unassigned] [Bug 226574] New: REGRESSION (maybe r276882): custom properties not available on host on initial paint

Thu Jun 3 02:41:58 PDT 2021

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

            Bug ID: 226574
           Summary: REGRESSION (maybe r276882): custom properties not
                    available on host on initial paint
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: vb at bigdot.de
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

With multiple shadow doms sharing a stylesheet their custom properties defined on the :host element are not available on first paint.
This leads to incorrect layout on first paint. When hovering over such an element a repaint occurs where the custom properties are now available and a flash occurs.

When there is only one shadow dom the problem does not exist.

A reproduction can be visited under https://realityfilter.github.io/safari-custom-properties-regression/
The github repo is https://github.com/realityfilter/safari-custom-properties-regression

Sometimes you have to clear the caches before reloading the page to see this bug.
The current Safari 14.4.1 does not have this bug.

This should have a huge impact on current frameworks like ionic, although I have not tested it, yet.

Simple external CSS:

```css
:host,
:root {
  --background-color: red;
}

div {
  background-color: var(--background-color);
  border: 1px solid black;
}
```

Javascript:
```js
const attachApp = (element) => {
    const root = element.attachShadow({mode: "open"})

    const style = document.createElement('link')
    style.rel= 'stylesheet'
    style.href = './app.css'
    root.append(style)

    const div = document.createElement('div')
    const p = document.createElement('p')
    p.textContent = 'I should have a red background'
    div.append(p)
    root.append(div)
}

document.querySelectorAll('.app').forEach(attachApp)
```

```html
<head>
</head>
<body>
    <!-- only one element is fine -->
    <div class="app"></div>
    <!-- with a second one, styling is incorrect -->
    <div class="app"></div>
    <script type="module" src="./app.js"></script>
</body>
```

-- 
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/20210603/0a3af9a8/attachment.htm>