hloth/blog.hloth.dev
1
0
Fork 0
Code Issues 6 Pull requests Activity

Menu's backdrop blur transition does not work in Firefox, works partially in Safari, works completely in Chrome #6

New issue
Open
opened 2025-10-22 20:57:29 +02:00 by hloth · 0 comments
hloth commented 2025-10-22 20:57:29 +02:00
Owner
Copy link

There isn't much to say as fix is completely blocked by browsers CSS engines implementations. Animated --properties are supported everywhere, animating backdrop blur is supported everywhere, but Firefox does not allow animations on ::backdrop of dialog element and Safari unmounts ::backdrop shadow element before it can run animation.

Consider JS and replace native ::backdrop with a div DOM element?

There isn't much to say as fix is completely blocked by browsers CSS engines implementations. Animated --properties are supported everywhere, animating backdrop blur is supported everywhere, but Firefox does not allow animations on `::backdrop` of dialog element and Safari unmounts `::backdrop` shadow element before it can run animation. Consider JS and replace native ::backdrop with a `div` DOM element?
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
svelte5.39-sveltekit-2.43-2025
react18-nextjs14-2024
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: hloth/blog.hloth.dev#6
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?