IntersectionObserver и clip-path не работают на iPad или iPhone ⇐ IOS

[Anonymous]

У меня есть анимация заголовка с использованием GSAP, которая начинается с текста, а затем при прокрутке видео отображается с помощью клип-пути для «увеличения» видео. Затем оно полностью раскрывается и в конечном итоге прокручивается за пределы экрана.
На видео есть IntersectionObserver, который воспроизводит/приостанавливает его в зависимости от того, видно ли 50 % видео. Идея заключается в том, что видео начинается с самого начала, как только пользователи прокручивают страницу вниз, а затем приостанавливается, когда пользователь выходит за пределы экрана. Это работает на настольных компьютерах и телефонах Android, но IntersectionObserver не работает с клип-путем на iPad или iPhone, независимо от того, используете ли они Safari или Chrome. IntersectionObserver работает, когда видео прокручивается за пределы экрана, а не с помощью пути клипа.
Из-за анимации GSAP видео в начале фактически отображается на экране, но скрыто путем клипа, который Я предполагаю, что проблема кроется в этом, но, как я уже сказал, IntersectionObserver работает со всем остальным.
Пожалуйста, поделитесь своими идеями о том, почему iOS не распознает это или есть ли какие-либо известные проблемы ? Я ничего не могу найти.
Код, который я использую. Ниже на странице есть несколько видео, поэтому код настроен следующим образом.
let videoPreloadObserverOptions = {
root: null,
rootMargin: "0px",
threshold: 0.5 // Trigger when img is 1% visible
};
var videoPreloadObserver = new IntersectionObserver(videoPreloadObserverCallback, videoPreloadObserverOptions);
function videoPreloadObserverCallback(entries, observer) {
entries.forEach(entry => {
const video = entry.target.querySelector("video");
if (entry.isIntersecting) {
video.play();
} else {
video.pause();
}
});
};
document.querySelectorAll(".video-preload").forEach((preload) => {
if (preload) {
videoPreloadObserver.observe(preload);
}
});


Подробнее здесь: https://stackoverflow.com/questions/790 ... -or-iphone