-webkit-animation-delay в модале не может работать в Safari и Chrome (мобильные ios) - PullRequest
Новая
       12

-webkit-animation-delay в модале не может работать в Safari и Chrome (мобильные ios)

0 голосов
/ 22 февраля 2019

Я столкнулся с проблемой, когда -webkit-animation-delay не мог работать с первой попытки, когда модал выпал.Однако, когда я перенаправил обратно на ту же страницу, анимация сработала.Это произошло для мобильных браузеров Safari и Chrome, а также веб-браузера Safari.

Вот коды для модального сообщения: 

<div class="modal" id="progressLoad" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content" style="text-align: center;">
        <div class="modal-header" style="color: teal">
            <b>Please wait while your voting is being created.</b>                           
        </div>
        <div class="modal-body">
            <center>
            <div class="lds-css ng-scope" >
                <div class="lds-blocks" style="100%;height:100%">
                    <div style="left:38px !important; top:38px; -webkit-animation-delay:0s"></div>
                    <div style="left:80px !important; top:38px; -webkit-animation-delay:0.125s"></div>
                    <div style="left:122px !important; top:38px; -webkit-animation-delay:0.25s"></div>
                    <div style="left:38px !important; top:80px; -webkit-animation-delay:0.875s"></div>
                    <div style="left:122px !important; top:80px; -webkit-animation-delay:0.375s"></div>
                    <div style="left:38px !important; top:122px; -webkit-animation-delay:0.75s"></div>
                    <div style="left:80px !important; top:122px; -webkit-animation-delay:0.625s"></div>
                    <div style="left:122px !important; top:122px; -webkit-animation-delay:0.5s"></div>
                </div>
            </div>
            <h3><b>Loading...</b></h3>
            </center>
        </div>                            
    </div>
</div>

А вот изображение дляпроблема:

Нажмите здесь

Обратите внимание, что вам придется немного подождать при просмотре .gif, когда он показывает загрузку.GIF имеет длину 30 с.

Заранее спасибо.

...