Framer Motion maskSize animation doesn't work in mobile phone

Issue

I have created a simple SVG mask scroll in Framer Motion. Here is the link to the sandbox: https://codesandbox.io/p/sandbox/svg-nextjs-masking-vgnhnd. While this masking works fine on a PC, it's not functioning on a mobile phone. The size of the mask is not increasing on a mobile phone. Does anyone have an idea on how to solve this issue? I've seen sites where this SVG scroll masking works on mobile phones as well.

Here is the deployed version - https://svg-clip-mask-scroll.vercel.app you can see in mobile scroll mask not working.

Here is the link to the sandbox: https://codesandbox.io/p/sandbox/svg-nextjs-masking-vgnhnd.

Here is my code. App.js

import "./styles.css";
import { useScroll, useTransform, motion } from "framer-motion";
import { useRef } from "react";

export default function App() {
  const scene = useRef(null);

  const { scrollYProgress } = useScroll({
    target: scene,
    offset: ["start start", "end end"],
  });

  const imageScale = useTransform(scrollYProgress, [0, 1], ["300px", "3000px"]);

  return (
    <>
      <div style={{ height: "30vh" }}></div>

      <h1>Look at Masking using svg</h1>

      <div className="main" ref={scene}>
        <motion.div className="mask" style={{ maskSize: imageScale }}>
          <img src="/cement-industry.jpg" />
        </motion.div>
      </div>

      <div style={{ height: "100vh" }}></div>
    </>
  );
}

Style.css

.main {
  height: 250vh;
}

.mask {
  position: sticky;
  top: 0px;
  height: 100vh;
  overflow: hidden;
  -webkit-mask-image: url(/mask-star.svg);
  mask-image: url(/mask-star.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The output on a mobile phone shows that the mask size doesn't increase. I've tried different phones, but the same issue occurs. Do you have any possible solutions or hints? Let me know.

Solution

The issue has been resolved. The problem was related to an old browser that does not support maskSize. To address this, we needed to include WebkitMaskSize in the style as well to ensure that the changes are visible in older browsers.

        <motion.div className={styles.mask} style={{ maskSize: imageScale, WebkitMaskSize: imageScale  }}>

Answered By - Alex Advent