Bug reportNov 14, 2026· 0:21· 10 views
Basecoat: toast notifications disappear behind the <dialog> top-layer overlay when a modal is open
0:21 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumToast component stacking relative to native <dialog> showModal() top layer and its ::backdrop. The toaster container may need to be promoted to the top layer, for example as a popover, or moved into the open dialog.
os: macOSdpr: 1url: /components/dialoglocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the Basecoat Dialog docs page at /components/dialog.
- 2.Wait for the toast 'Event has been created' to appear in the bottom right corner.
- 3.Click the 'Open Dialog' button.
- 4.Observe the toast while the 'Edit profile' modal is open.
- 5.Click 'Cancel' to close the modal.
Expected
The toast stays readable above the page while the modal dialog is open, so notifications are not hidden by the dialog backdrop.
Actual
While the modal is open, the toast is blurred and dimmed behind the dialog backdrop. It stays in the DOM at the same position but cannot be read. It becomes readable again only after the dialog closes.
Evidence
visualToast 'Event has been created / Your session has been saved.' is visible and readable at the bottom right before any dialog opens.
consolebasecoat#133 toast before dialog: found true, x 936, y 639, w 328, h 65.
visualAfter clicking Open Dialog, the 'Edit profile' modal opens. The page behind it is blurred and the toast in the bottom right is blurred and dimmed with it.
consolebasecoat#133 dialog open: open true, id demo-dialog-edit-profile.
consolebasecoat#133 toast state during dialog (in DOM but visually covered): found true, inDom true, x 936, y 639.
visualToast is still blurred behind the backdrop just before Cancel is clicked.
consolebasecoat#133 toast after dialog close: found true, x 936, y 639, w 328, h 65.
visualAfter the dialog closes, the toast is readable again at the same position. A label reads 'Toast reappears after dialog dismissed'.
Issue markdown (copy-paste ready)
## Summary Toast notifications are hidden behind the native `<dialog>` top-layer backdrop while a modal dialog is open. The toast stays in the DOM at the same position but is blurred and unreadable until the dialog closes. ## Environment - Browser: Chromium 151.0.7922.34 - OS: macOS - Viewport: 1280x720, DPR 1 - Page: `/components/dialog` (Basecoat docs) ## Steps to reproduce 1. Open `/components/dialog` (0s). 2. Wait for the toast 'Event has been created' to appear in the bottom right (3s). 3. Click **Open Dialog** (8.2s). 4. Observe the toast while the **Edit profile** modal is open (9s). 5. Click **Cancel** (15.1s). ## Expected The toast stays visible and readable above the modal backdrop. ## Actual The toast is blurred and dimmed behind the dialog backdrop from 9s to 15s. It becomes readable again only after the dialog closes (17s). ## Evidence - 3s: toast visible and readable before the dialog opens. - 7.1s console: `toast before dialog: found true, x 936, y 639, w 328, h 65`. - 9s visual: modal open, toast blurred behind the backdrop. - 10.0s console: `dialog open: open true, id demo-dialog-edit-profile`. - 10.0s console: `toast state during dialog (in DOM but visually covered): inDom true, x 936, y 639`. - 16.6s console: `toast after dialog close: x 936, y 639, w 328, h 65`. - 17s visual: toast readable again at the same position. ## Notes The toast position and size do not change across the three logs. This points to a stacking issue: the modal `<dialog>` and its `::backdrop` render in the browser top layer, above any z-index of the toaster. A possible fix is to render the toaster in the top layer, for example with the Popover API, or to move it into the open dialog. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →