Bug 276454
| Summary: | Style doesn't update on :scope when an element is no longer a candidate for a CSS Scope rule | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Zacky Ma <zacky> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | koivisto, m_dubet, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | All | ||
| OS: | All | ||
Zacky Ma
When an element is changed and should no longer be selected by a scope rule, the styles defined in `:scope` persists.
For example, given the CSS code:
```
body {
color: black;
}
@scope (.foo) {
:scope {
color: red;
}
:scope::after {
content: ' more text';
}
span {
color: green;
}
}
```
and the HTML code:
```
<body>
<p class="foo">Some <span>text</span></p>
</body>
```
When `foo` class is removed from `<p>`, the text color in `<p>` remains as red, instead of falling back to be the body color (black); "more text" remains instead of being removed. But the text color in `<span>` is correctly falling back to its parent's color, which is red.
Testing Codepen: https://codepen.io/marchbox/pen/JjQovBp
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Zacky Ma
Should've also mentioned, forcing the element to be repainted, e.g. setting `<p>` with `visibility: hidden` then reset `visibility` does correct the styles.
Radar WebKit Bug Importer
<rdar://problem/131962940>
Matthieu Dubet
*** This bug has been marked as a duplicate of bug 279225 ***