Анимация SVG Scale Scale медленная на iOS ⇐ CSS

[Anonymous]

Я пытаюсь добавить анимацию в SVG. Он отлично работает в браузерах на базе Webkit, но на iOS Chrome и Safari анимация очень медленная. Вот страница, которую я пытаюсь оживить. Вот соответствующий код ... < /p>


const HomeHeading = styled.svg`
margin: 0;
color: rgba(255, 255, 255, 1);
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
backface-visibility: hidden;
perspective: 1000;
transform: scale(
${props =>
props.scrollPosition / props.scale < 1
? 1
: props.scrollPosition / props.scale}
)
translateZ(0);
transform-origin: 42% 56%;

@media screen and (max-width: 480px) {
transform-origin: 43% 38% !important;
}

rect {
-webkit-mask: url(#mask);
mask: url(#mask);
fill: #f00;
}

defs {
mask {
rect {
fill: white;
}
text {
transform: translateY(10%);
font-size: 8vw;

@media screen and (max-width: 480px) {
transform: translateY(0);
}

&:last-child {
@media screen and (max-width: 480px) {
transform: translateY(0);
}
transform: translateY(20%);
}
}
}
}
`;
const HomeSubHomeSectionHeading = styled.section`
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: #1ecbe1;
position: fixed !important;
display: flex;
align-content: center;
justify-content: center;
flex-wrap: wrap;
`;

const ColorChanger = styled.div`
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 3;
background-color: rgb(255, 255, 255);
opacity: ${props => 3000 / props.scrollPosition / 20};
`;

const ImageStamp = styled.div`
width: 280px;
height: auto;
display: inline-block;
padding: 10px;
background: white;
position: relative;
-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
background: radial-gradient(
transparent 0px,
transparent 4px,
white 4px,
white
);
background-size: 20px 20px;
background-position: -10px -10px;

&:after {
content: "";
position: absolute;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
z-index: -1;
}

@media screen and (max-width: 768px) {
width: 200px;
margin-bottom: 30px;
}
`;

const MeSection = styled.section`
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
`;

const MePhoto = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 33.333%;
`;

const MeBio = styled.div`
flex: 1 0 66.666%;
color: #ffffff;
padding: 0 30px;
`;

const MeSocials = styled.div`
svg {
margin: 0 10px;
}
`;

const SocialLink = styled.a`
color: #fff;
&:hover {
color: #f1f1f1;
}
`;

const IndexPage = props => {
const [scrollPosition, setScrollPosition] = useState(0);
const [scale, setScale] = useState(0);

useEffect(() => {
window.addEventListener("scroll", handleScroll, { passive: true });
});

const handleScroll = () => {
const position = window.scrollY;
setScale(document && document.width > 500 ? 20 : 5);
setScrollPosition(position);
};

return (













Я знаю, что я могу только анимировать преобразования и непрозрачность, также я добавил Transtatez , чтобы использовать аппаратное рендеринг и задних видов к CSS без повезло. />
Редактировать: < /strong> Согласно комментариям, я попытался привести к удару обратный вызов прокрутки, используя этот пакет. Вот код, который я использую на основе этого пакета ... < /p>

useScrollPosition(
({ prevPos, currPos }) => {
setScale(document && document.width > 500 ? 20 : 5);

const shouldBeStyle = {
transform: `scale(${
Math.abs(currPos.y) < 9 ? 1 : Math.abs(currPos.y) / scale
}) translateZ(0)`,
pointerEvents: `${Math.abs(currPos.y) > 1000 ? "none" : "auto"}`,
};

const opacityStyle = {
opacity: 1000 / Math.abs(currPos.y) / 20,
};

if (JSON.stringify(shouldBeStyle) === JSON.stringify(scrollStyling))
return;

setOpactiyStyling(opacityStyle);

setScrollStyling(shouldBeStyle);
},
[scrollStyling, opacityStyling]
);


Подробнее здесь: https://stackoverflow.com/questions/617 ... low-on-ios