3 ms·

In examples, when adding an item to the list, I see a brief flash of the target state, then it goes back to the previous state and then an animation happens (mo

by thih9 4y ago

In examples, when adding an item to the list, I see a brief flash of the target state, then it goes back to the previous state and then an animation happens (mobile safari). Is there a way for the library to eliminate this “blink”? Or is this behavior unavoidable with current one liner approach?

mattgperry 4y ago
This is possible to fix but probably not by using Resize/MutationObservers (as the library does) In Framer Motion we use React's layout effect to trigger the <motion.div layout /> animations (which are equivalent to this). The layout effect runs synchronously after DOM mutation and works cross-browser. https://codesandbox.io/s/framer-motion-reorder-animation-bviz6?file=/src/Example.tsx https://codesandbox.io/s/framer-motion-reorder-animation-bvi... I don't trust the implementation of observers, usually in Safari, to reliably recreate this effect. I'm not sure it's even specced.
andrew_braid 4y ago
I’ve seen this on my own device (author of the docs site here) but after a force quit and restart of safari was not able to reproduce. Would you mind if I asked a few questions? - does your device have remote debugging enabled on Safari? - was your phone in low-power mode? - did you first access the site through a WebKit in-app browser panel before opening it Safari? - what version of iOS? - what model of iPhone? Those are my leading theories for what contributes to the flash happening. If you force quit and restart safari and / or reboot your phone does it work as expected?
- thih9 4y ago
  > - does your device have remote debugging enabled on Safari? Do you mean “Web Inspector”? Yes. > - was your phone in low-power mode? No. > - did you first access the site through a WebKit in-app browser panel before opening it Safari? No. > - what version of iOS? 15.2 > - what model of iPhone? 13 Pro Max I did force quit Safari and I no longer see the brief flash of target state when adding items to lists. But I didn’t check if I saw that immediately before doing force quit, sorry. I’ll write if I ever see that again.
  - thih9 4y ago
    I just tried it in a different browser, firefox focus (also ios) and got the blinking; it was slightly different, there seems to be some other issue there too. BUT after force quitting ff focus, the issue is again gone.

by thih9 4y ago

mattgperry 4y ago

This is possible to fix but probably not by using Resize/MutationObservers (as the library does) In Framer Motion we use React's layout effect to trigger the <motion.div layout /> animations (which are equivalent to this). The layout effect runs synchronously after DOM mutation and works cross-browser. https://codesandbox.io/s/framer-motion-reorder-animation-bviz6?file=/src/Example.tsx https://codesandbox.io/s/framer-motion-reorder-animation-bvi... I don't trust the implementation of observers, usually in Safari, to reliably recreate this effect. I'm not sure it's even specced.

andrew_braid 4y ago

I’ve seen this on my own device (author of the docs site here) but after a force quit and restart of safari was not able to reproduce. Would you mind if I asked a few questions? - does your device have remote debugging enabled on Safari? - was your phone in low-power mode? - did you first access the site through a WebKit in-app browser panel before opening it Safari? - what version of iOS? - what model of iPhone? Those are my leading theories for what contributes to the flash happening. If you force quit and restart safari and / or reboot your phone does it work as expected?

thih9 4y ago
> - does your device have remote debugging enabled on Safari? Do you mean “Web Inspector”? Yes. > - was your phone in low-power mode? No. > - did you first access the site through a WebKit in-app browser panel before opening it Safari? No. > - what version of iOS? 15.2 > - what model of iPhone? 13 Pro Max I did force quit Safari and I no longer see the brief flash of target state when adding items to lists. But I didn’t check if I saw that immediately before doing force quit, sorry. I’ll write if I ever see that again.
- thih9 4y ago
  I just tried it in a different browser, firefox focus (also ios) and got the blinking; it was slightly different, there seems to be some other issue there too. BUT after force quitting ff focus, the issue is again gone.