[Browser] Notification bar ("Save login") is unclickable when the page sets body { pointer-events: none } (Radix/Ark/Chakra modals) — clicks fall through to the page
- Dominant language
- TypeScript
- Stars
- 13.8k
- Forks
- 2k
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 389
Description
### Steps To Reproduce
1. Open any page that keeps a modal dialog open after a login form is submitted, where the dialog library sets `pointer-events: none` on `` while it is open (Radix UI Dialog, Ark UI / Zag.js Dialog, Chakra UI v3 — a very common pattern). Real-world case: Backrest 1.14.1 → Settings → Authentication.
2. Submit a login form so the "Save login" notification bar appears.
3. Click **Save**, the edit (pencil) button, or the close (×) button in the notification bar.
Minimal standalone repro (save as `repro.html`, open it, submit the form):
```html
Login
f.onsubmit = e => { e.preventDefault(); document.body.style.pointerEvents = "none"; };
```
### Expected Result
The notification bar buttons react to clicks (the login is saved / the edit popout opens / the bar closes).
### Actual Result
Nothing in the notification bar is clickable. The click falls **through** the bar to whatever page element is underneath it (in Backrest it toggles a switch inside the dialog). Reloading the extension or restarting the browser makes no difference.
### Screenshots or Videos
_N/A — the minimal HTML above reproduces it deterministically._
### Additional Context
Root cause, verified with the DevTools protocol on the live page:
- The page's dialog sets ``.
- The notification bar is injected as `div#bit-notification-bar > iframe#bit-notification-bar-iframe` inside a closed shadow root attached near the document root. Neither element declares `pointer-events`, and `pointer-events` is an **inherited** CSS property, so both compute to `pointer-events: none` (`CSS.getComputedStyleForNode` on the iframe → `none`). Forcing `body { pointer-events: auto }` immediately makes the bar clickable again.
- Inside the iframe everything is fine (`html`/`body` compute `auto`); the frame simply never receives the pointer event.
The autofill inline menu already protects itself against exactly this: `apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts` sets `pointer-events: auto` on its element. The notification bar container does not.
Suggested fix: set `pointer-events: auto !important` on `#bit-notification-bar` (and/or its iframe) when the bar element is created, mirroring the inline menu. (Note: #21633 is the opposite symptom — the bar *intercepting* clicks — and its fix does not cover this case.)
### Operating System
Linux
### Operating System Version
Fedora 44, Wayland (Hyprland)
### Web Browser
Brave
### Browser Version
1.93.138 (Chromium 151.0.7922.173)
### Environment Versions
- Browser extension: 2026.8.0 (Manifest V3, Chrome Web Store build)
- Also reproduced independent of the page: the minimal HTML above
- Desktop app 2026.x running alongside (not involved — the bar never sends the click)
### Issue Tracking Info
- [x] I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.
Contributor guide
Research direction
Start with apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts and locate the notification bar's creation and iframe setup for #bit-notification-bar. Compare how the inline menu handles pointer events, then verify the notification bar's Save, edit, and close buttons work when the page sets body { pointer-events: none }.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100