opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(emcn): promote modal overlay + content wrapper to own compositing layers

Browse Source 
The backdrop-blur overlay did not reliably paint above page content the
browser had GPU-promoted (position: sticky headers and z-indexed absolutes
inside a scroll container, e.g. the scheduled-tasks calendar), so those
composited layers bled through the overlay despite its higher z-index.
Force the overlay and the content wrapper onto their own compositing
layers via translateZ(0) so the compositor honors stacking order.

Inherent since the calendar shipped (#4979), not a refactor regression.
This commit is contained in:
waleed
2026-06-30 20:21:09 -07:00
parent 2c38e63c17
commit 52145edc97
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/emcn/src/components/modal/modal.tsx
+10 -2
View File
@@ -122,6 +122,14 @@ const ModalClose = DialogPrimitive.Close
* Modal overlay component with fade transition.
* Outside interactions are handled by the dialog content so nested poppers can
* close without also dismissing the modal.
*
* `[transform:translateZ(0)]` forces the overlay onto its own compositing layer.
* A `backdrop-blur` overlay does not reliably paint above page content the
* browser has already GPU-promoted — `position: sticky` headers and `z-index`ed
* absolutes inside a scroll container (e.g. the scheduled-tasks calendar) can
* sort ABOVE it despite its higher `z-index`, bleeding through. Promoting the
* overlay (and the content wrapper below, so the panel occludes too) makes the
* compositor honor stacking order.
*/
const ModalOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -131,7 +139,7 @@ const ModalOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px]',
'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px] [transform:translateZ(0)]',
ANIMATION_CLASSES,
className
)}
@@ -229,7 +237,7 @@ const ModalContent = React.forwardRef<
<ModalPortal>
<ModalOverlay />
<div
className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center [transform:translateZ(0)]'
style={
size === 'full'
? undefined