Calc () в анимации css свойство не работает только на краю микросфта - PullRequest
Новая
       31

Calc () в анимации css свойство не работает только на краю микросфта

0 голосов
/ 04 января 2019

Эта анимация загрузчика отлично работает в Chrome, Opera, Firefox и Safari. Но не работает в Microsoft Edge. Можно ли заставить его работать в Edge? 

<div class="_preLoader" style="--n:5">
            <div class="_circle _c1" style="--i:0"></div>
            <div class="_circle _c2" style="--i:1"></div>
            <div class="_circle _c3" style="--i:2"></div>
            <div class="_circle _c4" style="--i:3"></div>
            <div class="_circle _c5" style="--i:4"></div>
        </div>

СТИЛЬ 

._preloader {
        display: flex;
        align-content: space-around;
        justify-content: center;
    }

    ._circle,
    ._circle::after {
        background: rgb(255, 99, 71);
        display: inline-block;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        animation: a 1s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1s) infinite
    }


    ._circle::after {
        --o: 1;
        background: #3C4252;
        content: ''
    }



    @keyframes a {
        0%,
        50% {
            transform: scale(0)
        }

Этот jsfiddle https://jsfiddle.net/03ddygdx/20/ отлично показывает анимацию в описанных браузерах, кроме края microsft.

...