SVG ForeignObject с Clippath: URL (#...) отлично работает в другом месте, но не может обрезать текст на устройствах iOS ⇐ IOS

[Anonymous]

Я пытаюсь показать видео внутри текста, обрезав видео на текстовую маску. Он отлично работает над Android и Windows, но не работает на устройствах iOS. Любое предложение о том, как это исправить."use client";
import { useRef, useEffect } from "react";

export default function AnimatedVideoText() {
const videoRef = useRef(null);

useEffect(() => {
// autoplay if allowed
videoRef.current?.play().catch(() => {});
}, []);

return (





{/* three lines of white text punch holes in the mask */}

Your Creative


Development


Agency




{/* foreignObject spans the full SVG and is clipped by our mask */}





);
}
< /code>
Это CSS, который я использую < /p>
.video-text-mask {
-webkit-mask-image: text;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: text;
}

.video-section {
overflow: hidden;
position: relative;
width: 400px;
height: 200px;

background-color: rgb(255, 255, 255);
}
.video-section video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-copy {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 48.4vw;
margin-left: -2vw;
line-height: 78vw;

user-select: none;
mix-blend-mode: multiply;
}
< /code>



iPhone. alt = "iPhone выпуск" src = "https://i.sstatic.net/cwg3mnqg.png"/>
/>


Подробнее здесь: https://stackoverflow.com/questions/796 ... ils-to-cli