Performance Issue on Safari (Mobile & Web)

[zurez]

🐛 Bug Report

The following example is very laggy while running on safari , though it is very smooth on Chrome Android

To Reproduce

https://codesandbox.io/embed/j0y0vpz59
Steps to reproduce the behavior:
View the above url on iOS

[kldnajjar]

I have the same issue, the performance into chrome is perfect but thats not the case with Safari its lagging, when the parent state is too large more and more lagging it would be

[xzilja]

Same issue in non dom renderers like https://reactpixi.org and https://github.com/konvajs/react-konva, using "@react-spring/core": "9.1.1" to get useSpring

Not sure if it's helpful, but using https://greensock.com/gsap on same renderers doesn't seem to cause performance issues.

[joshuaellis]

Same issue in non dom renderers like https://reactpixi.org and https://github.com/konvajs/react-konva, using "@react-spring/core": "9.1.1" to get useSpring

Not sure if it's helpful, but using https://greensock.com/gsap on same renderers doesn't seem to cause performance issues.

If you can provide an example repro that'd be great. I've never used Konva before

[CodyJasonBennett]

Looking at the attached sandbox, this SO question might be related.

Unfortunately, I can't recreate this issue without a physical Apple device to investigate.

[Obi-Dann]

Got the same issue with react-konva on both Mac and Windows when upgrading from v8 to v9. Not sure if the issue with react-konva is related to the originally reported issue. The performance degradation seems to start with version 9.
Codesandbox with a simple react-konva animation using version 8, very smooth:
https://codesandbox.io/s/react-springkonva-performance-issue-v8-d4q8l

Codesandbox with a simple react-konva animation using version 9, performance is noticeably worse:
https://codesandbox.io/s/react-springkonva-performance-issue-v9-v0b9u

[alexkrkn]

Looking at the attached sandbox, this SO question might be related.

Unfortunately, I can't recreate this issue without a physical Apple device to investigate.

The linked stackoverflow answer resolved the issue for me.
It happened with both desktop and mobile Safari with the latest [email protected]. Adding transform: translate3d(0%,0,0); to the animated element made it a smooth animation like on chrome.

[sidpremkumar]

Looking at the attached sandbox, this SO question might be related.
Unfortunately, I can't recreate this issue without a physical Apple device to investigate.

The linked stackoverflow answer resolved the issue for me. It happened with both desktop and mobile Safari with the latest [email protected]. Adding transform: translate3d(0%,0,0); to the animated element made it a smooth animation like on chrome.

Nice yeah can confirm this still works and solved my problem as well.

Just went from

    <animated.div 
      style={{
        ...fade,
      }}
    >
      {children}
    </animated.div>

to

    <animated.div
      style={{
        transform: "translate3d(0, 0, 0)", // Just added this
        ...fade,
      }}
    >
      {children}
    </animated.div>