Backdrop-Filter funktioniert nicht ordnungsgemäß in Chrome (funktioniert aber in Firefox) ⇐ CSS

[Anonymous]

Ich versuche, ein Modal mit dem nativen Element mit einem verschwommenen Hintergrund anzuzeigen. Es funktioniert perfekt in Firefox, aber im Chrom ist der Hintergrund nur halbtransparent, ohne eine Unschärfe. Firefox (erwartete Ergebnis) < /p>

Modal öffnet sich < /li>
Hintergrund ist dunkel und verschwommen mit BackRock-Filter: Blur (2px) < /li>
< /ul>
< />

Hintergrund ist dunkel, aber nicht vollständig verschwommen. Es ist verschwommen. Und außerhalb des Kopfes ist es weniger verschwommen, und der Rest ist nicht verschwommen. src = "https://i.sstatic.net/xfgotvcg.png"/>
WorkSpaces.tsx

Code: Select all

import { useModal } from '@/hooks/useModal'
import { NewWorkspace } from '@/modals/NewWorkspace'
import PlusSignIcon from '@hugeicons/PlusSignIcon'
import { Button } from '@shadcn/button'
import { useQuery } from '@tanstack/react-query'
import { FC, useEffect } from 'react'
import workspacesApi from './workspacesApi'

type WorkspacesProps = {}

const Workspaces: FC = () => {
const { openModal, closeModal, Modal, triggerStyle } = useModal('newWorkspace')

const { data } = useQuery({
queryKey: ['workspaces'],
queryFn: workspacesApi,
})

const workspaces = data?.data

useEffect(() => {
console.log(data?.data)
}, [data])

return (


{workspaces?.map((w) => {
return (

[img]{[/img]
                alt={w.workspace_name}
/>

)
})}








)
}

export default Workspaces

Im Header verwendet. PrettyPrint-Override ">

Code: Select all

import { blankFn } from '@utils/utils'
import { FC, useCallback, useEffect, useRef } from 'react'
import { ModalProps } from '.'
import { CloseButton } from './CloseButton'

export const Modal: FC = ({
isOpen,
name,
onClose,
children,
Close,
noClose = false,
}) => {
const modal = useRef(null)

const handleKeyDown = useCallback(
(event: React.KeyboardEvent) => {
if (event.key === 'Escape' && !noClose) {
onClose?.()
}
},
[noClose, onClose],
)

useEffect(() => {
// Focus on the modal to enable keyboard events
modal.current?.focus()
}, [])

if (!isOpen) return null

return (

className={`${noClose ? '' : 'mb-10'} flex flex-col gap-3`}
style={{ viewTransitionName: name }}
>

{!noClose && Close !== null && (Close || )}

{children}


)
}
< /code>
usemodal.tsx
import { useCallback, useMemo, useState } from 'react'

import transitions from '@/utils/utils'
import { Modal } from './Modal'

export function useModal(modalName: string, initialOpen = false) {
const [open, setOpen] = useState(initialOpen)

const triggerName = open ? modalName : `${modalName}-close`
const name = open ? `${modalName}-close` : modalName

const openModal = useCallback(() => transitions(() => setOpen(true)), [])
const closeModal = useCallback(() => transitions(() => setOpen(false)), [])
const toggleModal = useCallback(() => transitions(() => setOpen((prev) => !prev)), [])
const triggerStyle = useMemo(
() => ({ viewTransitionName: triggerName, opacity: open ? 0 : 1 }),
[open, triggerName],
)

const ModalComponent = useMemo(() => {
return ({ children, noClose, ...rest }: ModalProps) => (

{children}

)
}, [open, name, closeModal])

return {
isOpen: open,
openModal,
closeModal,
toggleModal,
triggerName,
name,
Modal: ModalComponent,
triggerStyle,
}
}

export type ModalProps = {
isOpen?: boolean
name?: string
onClose?: () => void
children?: React.ReactNode
Close?: React.ReactNode
noClose?: boolean
}