[BUG] Opacity animation is delayed on page load/reload with Next.js

1. Describe the bug

Opacity animation is delayed on page load/reload with Next.js, only on Chrome and when deployed on Vercel.

On a typical fade in animation (opacity 0→1, Y translate), the opacity animation delay causes the translate animation not to be visible.

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

The bug is only reproduced when deployed on Vercel. The bug does not happen in CodeSandbox, but it is also provided for comparison.

• Source code
• Vercel deployment
• CodeSandbox

3. Steps to reproduce

Steps to reproduce the behavior:

1. Using Chrome, navigate to the app deployed on Vercel: https://test-next-framer.vercel.app/
2. See animation on page load.
3. Reload the page
4. See animation on page reload. The Y-translate animation of the blue square is not visible because -apparently- the opacity animation is delayed.

I see the issue also occasionally on first page load, but not always.

4. Expected behavior

The blue square should animate it's opacity 0 → 1 at the same time as it Y-translates from the bottom container to the top

5. Video or screenshots

✅ Correct behavior (Vercel, Safari):

https://github.com/framer/motion/assets/1535759/6443da59-5005-4d80-ae70-da3cb8e9ee27

✅ Correct behavior (CodeSandbox, Chrome):

https://github.com/framer/motion/assets/1535759/14f634d4-7ef2-4e44-b5f7-943108c316a6

❌ Incorrect behavior (Vercel, Chrome):

https://github.com/framer/motion/assets/1535759/eb571955-54a9-4cab-a2a6-f9c0b20cc03e

6. Environment details

• macOS Ventura 13.5
• Google Chrome 117.0.5938.149
• Next.js 13.5.4
• Framer Motion 10.16.4
• Deployed on Vercel

Start with the reproduction in app/page.tsx and compare the Vercel deployment in Chrome with the CodeSandbox version, including reloads. Trace the page-load animation behavior in the reported environment and verify that opacity and Y translation begin together without breaking the Safari and CodeSandbox behavior.