Re: [csswg-drafts] `::backdrop` does not prevent clicks below when `pointer-events: none;` applied. Should it? (#13100)

> Before dialog, making a fixed position modal, with a mask behind (typically also fixed but with no inset) as the previous sibling element to the faux dialog, you would apply ‘pointer-events: none’ to create a click mask, preventing clicks on the item below.

Like this?
```html
<!DOCTYPE html>
<style>
    div {
        position: fixed;
        top: 0;
        left: 0;
    }
    #backdrop {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        pointer-events: none;
    }
    #modal {
        background-color: white;
        inset: 10em;
    }
</style>
<button>Try to click me</button>
<div id="backdrop"></div>
<div id="modal"></div>
```
Because that does not work. The clicks go straight through `#backdrop` and hit the button.

> I’m not hung up on how the same functionality is achieved with ::backdrop but feel it should be possible for the backdrop to prevent clicks.

If I'm understanding what you're asking for correctly, this should be all you should need:
```html
<!DOCTYPE html>
<style>
    dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>
<button>Try to click me</button>
<dialog id="dialog"></dialog>
<script>dialog.showModal();</script>
```
This will put the dialog into the top layer, which will [block clicks to everything below it](https://html.spec.whatwg.org/multipage/interaction.html#modal-dialogs-and-inert-subtrees) (like the button) by making all those things [inert](https://html.spec.whatwg.org/multipage/interaction.html#inert) and therefore un-clickable.

> Backdrop is typically used to visually obfuscate content below and I think it’s reasonable that users/authors might expect that to prevent clicks there too. Do you agree?

I agree. And it does prevent clicks.

-- 
GitHub Notification of comment by Psychpsyo
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13100#issuecomment-3524489192 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 13 November 2025 00:22:25 UTC