I used framer-motion to make a simple one pager.

It uses useScroll to rotate an image. The animation plays smoothly on desktop browsers.

On my mobile phone I’m experiencing slight glitches where parts of the image flicker / turn black for a split millisecond

This problem get’s much better when I add the following CSS on the element being rotated:

will-change: transform;

However it still occasionally flickers ever so slightly so I assume there’s something else going on.

Please view this page on a (slow) smartphone and scroll down.

_{Note: the effect becomes slightly visible on Desktop without will-change and CPU throttling}

This is the code of the component that flickers. It doesn’t seem to happen when I remove the rotation.

<motion.div
  layout
  style={{
    rotate,
    borderRadius: paused ? radius : px,
    backdropFilter: 'blur(2px) saturate(0%)',
    scaleX: beat,
    scaleY: beat,
    transition: 'transform 340.5ms linear, border-radius 170.25ms ease-in-out',
    willChange: 'transform, border-radius',
    overflow: 'hidden',
    width: 'calc(100vh - 8rem)',
    maxWidth: 'calc(100vw - 2rem)',
    height: 'calc(100vh - 8rem)',
    maxHeight: 'calc(100vw - 2rem)',
    scale,
    margin: '2rem',
    boxShadow,
  }}
  className={clsx(
    'fix',
    'absolute lg:relative',
    'ml-4 md:!ml-16',
    'image-container',
    'max-w-[calc(100vw-1rem)]',
    'max-h-[calc(100vw-1rem)]',
    'lg:max-h-[50vw]',
    'lg:max-w-[50vw]',
  )}
>
  <motion.img className='w-full' src={img} style={{
    filter: imgFilter,
    opacity: opacityBg,
  }} />
  <svg className="progress" width="75" height="75" viewBox="0 0 100 100">
    <motion.circle
      cx="50"
      cy="50"
      r="50"
      className="indicator"
      style={{ pathLength: reverse, strokeWidth: '1px' }}
    />
    <motion.circle
      cx="50"
      cy="50"
      r="50"
      className="time"
      style={{ pathLength: progress, strokeWidth: '1px', position: 'absolute' }}
    />
  </svg>
</motion.div>

Anyone who can reproduce this or even experienced this with framer and has ideas what is causing this?