Фильтр SVG не работает на iOS с transform3d () - PullRequest
Новая
       125

Фильтр SVG не работает на iOS с transform3d ()

0 голосов
/ 04 августа 2020

Я пытаюсь применить фильтр SVG к блоку анимированных пузырей. Чтобы улучшить производительность анимации на мобильных устройствах, я использовал transform3d(0, 0, 0) в моем CSS. Однако по какой-то причине это нарушает фильтр SVG на устройствах iOS. Я также использую PrefixFree для автоматических префиксов c webkit. Может ли кто-нибудь помочь?

Мой код:

SVG-фильтр (JSX): 

            <svg style={{position:'fixed', top:'100vh'}}>
                <defs>
                    <filter id="blob">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur"></feGaussianBlur>
                        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -10" result="blob"></feColorMatrix>
                        <feComposite in="SourceGraphic" in2="blob" operator="atop"></feComposite>
                    </filter>
                </defs>
            </svg>

CSS: 

.bg .bubbles {
    transform: translate3d(0, 0, 0);
    perspective: 1000;
    backface-visibility: hidden;

    position: fixed;
    top:0;
    left:0;
    right: 0;
    height: max(10vh, 40px);
    width: 200vw;
    background:var(--accent);
    -webkit-filter:url("#blob");
    filter:url("#blob");
}

.bg .bubbles .bubble {
    position: absolute;
    right:var(--position, 50%);
    background:var(--accent);
    border-radius:100%;

    animation-name: bubble-size, bubble-move;
    animation-duration: var(--time, 4s), var(--time, 4s);
    animation-timing-function: ease-in, ease-in;
    animation-iteration-count: infinite, infinite;
    animation-delay: var(--delay, 0.1s), var(--delay, 0.1s);
    animation-direction: normal, normal;
    animation-fill-mode: none, none;
    animation-play-state: running, running;

    transform: translate(-50%, 100%);
}
...