Search code examples
cssreactjstypescriptanimationstyled-components

Animation - Scale, After Finishing on iphone it jumps away

I have this problem, I'm trying to work with animations, and everything works as I expect, even in the simulator. But the problem occurs if I take a physical device (Iphone). At that point the background zooms in, and after the animation is done, the div jumps to the left, as seen in the attached video. Video

Has anyone encountered a similar problem? Thanks

This problem only takes place on physical equipment and does not appear in emulators.

The problem occurs on iphone, both on safari and chromium browsers.

Repository code: Code

I expect the div to stay in the position in which it starts to load when zooming, as shown by the emulators and desktop.

Solution

  • I fixed it by applying will-change: transform;