Эффект занавеса в React работает с ошибками в iOS Safari (ошибка включения/отключения панели поиска) ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект занавеса, чтобы изменить цвет фона и текста впереди. Это работает, однако в Safari на iOS немного глючит. Как будто отстает. Я записал видео об ошибке.

Я использую это в среде Remix Remix (v2) с установленным попутным ветром.

import { useEffect, useRef } из "реагировать"; const toggleClasses = ( элемент: HTMLElement | нулевой, addClass: строка, удалитьКласс: строка, ) => { if (!element) return; element.classList.add(addClass); element.classList.remove(removeClass); }; экспортировать функцию по умолчанию Test() { const иногдаStickyRef = useRef(ноль); const UpperRef = useRef(ноль); useEffect(() => { const наблюдатель = новый IntersectionObserver( ([запись]) => { const isIntersecting = вход.isIntersecting; toggleClasses( иногдаStickyRef.current, isПересекающийся? «фиксированный»: «липкий», isПересекающийся? «липкий»: «фиксированный», ); }, { корень: ноль, rootMargin: "0px", порог: 0, }, ); if (!upperRef.current) return; наблюдатель.наблюдать(upperRef.current); return () => Observer.disconnect(); }, []); возвращаться ( это тест

это тест

тест

тест

это тест

это тест

тест

тест
); }
Я думаю, что это связано с изменением области просмотра из-за того, что панель поиска (нижняя панель, где находится URL-адрес) отключается при прокрутке вниз и снова включается при прокрутке вверх.
>
Я пробовал с этим повозиться.

Мы очень ценим вашу помощь. Я не знаток CSS, поэтому если есть какие-либо комментарии по поводу того, как его улучшить, я буду очень признателен.