[BUG] Laggy in Firefox

Description

When using framer-motion, all used animations are lagging on Firefox, even the ones from the Example page. I’ve tried it on Chromium and saw no issue whatsoever in a laggy animation. FPS also seem fine (28-30fps).

CodeSandbox

Even tho you require a CodeSandbox for reproduction, it’s not actually needed, as this also happens with the Examples on the Framer Motion page (or Docs). https://www.framer.com/api/motion/examples/

Code example I’m using as of now:

const variants = {
  open: { opacity: 1, y: 0 },
  closed: { opacity: 0, y: '15px' },
}

<motion.div initial={false} animate={shareBarVisible ? 'open' : 'closed'} variants={variants}>
  <ShareBar>
    <QuickShareBar>
      <FacebookShareButton url="https://google.com/">
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      <TwitterShareButton url="https://google.com/">
        <TwitterIcon size={32} round />
      </TwitterShareButton>
      <EmailShareButton url="https://google.com/">
        <EmailIcon size={32} round />
      </EmailShareButton>
    </QuickShareBar>
  </ShareBar>
</motion.div>

Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://www.framer.com/api/motion/examples/
2. Scroll down to any animation
3. See laggyness

Expected behavior

The animation should not be laggy. See following Video: https://streamable.com/g97k9

Video

Current behavior in Firefox: https://streamable.com/m392r

Environment details

OS: macOS Catalina Browser: Firefox Developer Edition (recent public build)

[GauravRajSharma]

this is still a major issue concerning framer-motion. animation works with all other major browsers but the laggyness of animation is still prominent in Firefox v78.0.2 (64-bit). any solutions concerning this? framer-motion is really nice and fun to work it, but Firefox support is a must.

[mattgperry]

This can be fixed on a per-site basis by serving content with the following headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

From https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#Reduced_time_precision