-webkit-animation-delay в модале не может работать в Safari и Chrome (мобильные ios)
Я столкнулся с проблемой, когда -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 с.
Заранее спасибо.