animation and rendering of the app is glitchy on Firefox

[tangway]

on Firefox Developer's Edition, the animation runs with some glitches. when user clicks Next, the buttons will flash to their full size once, go back to being small and animate to the full size, and then flash again.

i used the Animation Inspector on Firefox's devtools but this flashing doesnt show up on the animation timeline at all. https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/work_with_animations/index.html https://calibreapp.com/blog/investigate-animation-performance-with-devtools

this problem does not occur on Chrome-based browsers

[tangway]

https://reactjam.com/winners

this list of games made with react can be used to test the performance and rendering difference between Firefox and Chrome

[tangway]

after deploying the app, i tested it with various browser on an old iphone. i realized that Firefox, Chrome and Safari browsers on iOS all have the same problem of animating the choice buttons to full size and then flashing once. this does not happen on chrome-based browsers on Android. this seems to be a WebKit rendering issue as Apple only allowed browsers to use other rendering engines besides WebKit after iOS version 17.7.5 and my device is on iOS 15.

and so it is that only browsers using Chrome's Blink engine can properly render the current framer motion animation for the buttons.

[tangway]

changing the framer motion animation parameters from:

initial={{ transform: 'scale(0)', opacity: 0 }}
animate={{ transform: 'scale(1)', opacity: 1 }}

to:

initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}

worked to remove this animation glitch on Firefox. as a side effect it also works on WebKit-based browsers like Safari and browsers on iOS which are restricted to using the WebKit rendering engine