bitwarden / bitwarden/clients

[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

Open Beginner friendly
#22,643 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.