Векторные ошибки в Edge (отлично работает в Chrome и Safari) - PullRequest
Новая
       6

Векторные ошибки в Edge (отлично работает в Chrome и Safari)

0 голосов
/ 20 февраля 2020

Обратите внимание на следующую анимацию, которая отлично работает в chrome и Safari, как на мобильных, так и на настольных компьютерах, но имеет ошибку в Microsoft Edge: Бесконечный тест

сбой, похоже, заключается в том, что анимация сбрасывается в правильное состояние, но окончательный рендер исчезает в Edge. Это можно проверить, наведя указатель мыши на крайнюю вкладку, где появляется «предварительный просмотр» содержимого. Предварительный просмотр показывает правильное отображение , но не фактическую страницу! Я хочу подтвердить, что мой код верен в отношении css анимаций и платформ Microsoft, прежде чем отправлять официальный отчет об ошибках. 

<div class="infinity-banner">
        <svg id="infinity-frame-svg" height="400" width="600">
            <defs>
                <linearGradient id="infinity-gradient" gradientUnits="userSpaceOnUse" x1="465" y1="290" x2="20" y2="310">
                  <stop offset="0%"   stop-color="#31daf1"/>
                  <stop offset="100%" stop-color="#0300ff"/>
                </linearGradient>
              </defs>
           <path id="infinity-frame" d="M 545 235 L 465 350 L 220 50 L 60 235 Z" stroke="url(#infinity-gradient)"
            stroke-width="15" fill="none" />
            <path id="infinity-cut-piece" d="M 543 237.7 L 545 235 L 537 235" stroke="#31daf0"
            stroke-width="15" fill="none" />
        </svg>
    </div>

svg основан на пути.

Более важно, вот стиль: 

#infinity-frame {
        stroke-dasharray: 1265;
        stroke-dashoffset: 1255;
        -webkit-animation: draw-infinity-frame 3s forwards;
                animation: draw-infinity-frame 3s forwards;
        -webkit-animation-timing-function: cubic-bezier(1,0,.8,1);
                animation-timing-function: cubic-bezier(1,0,.8,1);
    }
    #infinity-frame-svg {
        margin-top: 100px;
        -webkit-filter: drop-shadow( 0px 0px 20px rgba(0,0,255,1));
        filter: drop-shadow( 0px 0px 20px rgba(0,0,255,1));
        -webkit-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        opacity: 0;
        -webkit-animation: intro-infinity 3s forwards;
                animation: intro-infinity 3s forwards;
        -webkit-animation-timing-function: cubic-bezier(1,0,.8,1);
                animation-timing-function: cubic-bezier(1,0,.8,1);
        -webkit-transform: scale(2,2) rotateZ(45deg);
            -ms-transform: scale(2,2) rotate(45deg);
                transform: scale(2,2) rotateZ(45deg);
    }
    @-webkit-keyframes draw-infinity-frame {
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes draw-infinity-frame {
        to {
            stroke-dashoffset: 0;
        }
    }
    @-webkit-keyframes intro-infinity {
        to {
            opacity: 1;
            -webkit-transform: scale(1,1) rotateZ(0);
                    transform: scale(1,1) rotateZ(0);
        }
    }
    @keyframes intro-infinity {
        to {
            opacity: 1;
            -webkit-transform: scale(1,1) rotateZ(0);
                    transform: scale(1,1) rotateZ(0);
        }
    }

Есть ли здесь что-нибудь, что могло бы вызвать законное исчезновение части пути после анимации?

...