- From: Oriol Brufau via GitHub <noreply@w3.org>
- Date: Sat, 06 Sep 2025 12:25:42 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-backgrounds][css-overflow] Is viewport's background painted behind viewport's scrollbars? ==
If both the background and the overflow get propagated to the viewport, what happens?
https://drafts.csswg.org/css-backgrounds-3/#body-background
https://drafts.csswg.org/css-overflow-3/#overflow-propagation
```html
<!DOCTYPE html>
<iframe width="100" height="100" srcdoc="
<style>
:root {
background: cyan;
scrollbar-color: rgb(255, 0, 255, 0.5) rgb(255, 0, 255, 0.5);
overflow: scroll;
}
::-webkit-scrollbar { background-color: rgb(255, 0, 255, 0.5); width: 12px; height: 12px; }
</style>
"></iframe>
```
| Gecko | Blink | WebKit |
| - | - | - |
| <img width="115" height="114" src="https://github.com/user-attachments/assets/e1701283-3eeb-4d3b-94a7-9a4941d37f89" /> | <img width="115" height="114" src="https://github.com/user-attachments/assets/36e8ae63-e5d6-48a9-b9c9-74d39cef019d" /> | <img width="115" height="114" src="https://github.com/user-attachments/assets/6586acd2-7926-4153-9531-ee7181ff97db" /> |
I would expect the background to be painted below the scrollbar like in a normal element, and be able to change that with `background-clip: content-box` (but that never works, see #11169)
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12744 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 6 September 2025 12:25:43 UTC