You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
2. Describe the bug
My site flickers on firefox, but not on edge.
Give a clear and concise description of what the bug is.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
It decides to work with minimal representation, but you can clearly see it with the whole site (it's one page don't worry)
Look at components/base/PageOverlay, components/base/List, and components/base/Portal to see the usage.
A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.
4. Steps to reproduce
Steps to reproduce the behavior:
Refresh the page and see PageOverlay flicker
Click on one of the cards and watch it flicker
Click on the dropdown and watch it flicker
5. Expected behavior
No flicker, just smooth transition
A clear and concise description of what you expected to happen.
6. Video or screenshots
If applicable, add a video or screenshots to help explain the bug.
7. Environment details
If applicable, let us know which OS, browser, browser version etc you're using.
Windows Firefox 114.0.1, Edge version 114.0.1823.51
FAQs
Framer Motion won't install
Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.
height: "auto" is jumping
Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.
The recommended solution is to move padding to a child element. See this issue for the full discussion.
Type error with AnimateSharedLayout
AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.
Preact isn't working
Framer Motion isn't compatible with Preact.
AnimatePresence isn't working
Have all of its immediate children got a unique key prop that remains the same for that component every render?
// Bad: The index could be given to a different component if the order of items changes<AnimatePresence>{items.map((item,index)=><Componentkey={index}/>)}</AnimatePresence>
// Good: The item ID is unique to each component<AnimatePresence>{items.map((item,index)=><Componentkey={item.id}/>)}</AnimatePresence>
Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!
// Bad: AnimatePresence is unmounted - exit animations won't run{isVisible&&(<AnimatePresence><Component/></AnimatePresence>)}
// Good: Only the children are unmounted - exit animations will run<AnimatePresence>{isVisible&&<Component/>}</AnimatePresence>
The text was updated successfully, but these errors were encountered:
I'm gonna close for now as I think this is one I probably won't be able to do much with. However from looking at your site I notice the arrows are missing icons before the flash and I think there's something to do with those loading in that coincides with the flash, maybe Firefox has a problem rerendering like that mid-animation
1. Read the FAQs 馃憞
2. Describe the bug
My site flickers on firefox, but not on edge.
Give a clear and concise description of what the bug is.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
It decides to work with minimal representation, but you can clearly see it with the whole site (it's one page don't worry)
Look at components/base/PageOverlay, components/base/List, and components/base/Portal to see the usage.
A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.
4. Steps to reproduce
Steps to reproduce the behavior:
5. Expected behavior
No flicker, just smooth transition
A clear and concise description of what you expected to happen.
6. Video or screenshots
If applicable, add a video or screenshots to help explain the bug.
7. Environment details
If applicable, let us know which OS, browser, browser version etc you're using.
Windows Firefox 114.0.1, Edge version 114.0.1823.51
FAQs
Framer Motion won't install
Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.
height: "auto"
is jumpingAnimating to/from
auto
requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.The recommended solution is to move padding to a child element. See this issue for the full discussion.
Type error with
AnimateSharedLayout
AnimateSharedLayout
was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.Preact isn't working
Framer Motion isn't compatible with Preact.
AnimatePresence
isn't workingHave all of its immediate children got a unique
key
prop that remains the same for that component every render?Is the
AnimatePresence
correctly outside of the controlling conditional?AnimatePresence
must be rendered whenever you expect anexit
animation to run - it can't do so if it's unmounted!The text was updated successfully, but these errors were encountered: