Backdrop-Filter funktioniert nicht ordnungsgemäß in Chrome (funktioniert aber in Firefox)
Posted: 22 May 2025, 09:31
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
Im Header verwendet. PrettyPrint-Override ">
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
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
}