CSS-анимация создает мерцание в браузере Firefox

Question

Я дал настраиваемую анимацию css для загрузочного модального, но в браузере Firefox некоторые подкладки появляются, когда я открываю модальный. Пожалуйста, см. Ниже изображение для лучшего понимания.

Я написал код ниже фрагмент кода, что я сделал. Обратите внимание, что это фиктивный фрагмент для простого обмена кодами.

.fade-in.in { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    animation-delay:0.5s; 
 
    -webkit-animation-delay:0.5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    animation-name:admin-popup-fadeIn; 
 
    -webkit-animation-name:admin-popup-fadeIn; 
 
} 
 

 
.fade-in.in .modal-dialog{ 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-duration: 1.5s; 
 
    animation-delay:1s; 
 
    -webkit-animation-delay:1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    animation-name:admin-popup-fadeIn; 
 
    -webkit-animation-name:admin-popup-fadeIn; 
 
} 
 

 
@-moz-keyframes admin-popup-fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    visibility:hidden; 
 
    } 
 

 
    to { 
 
    opacity: 1; 
 
    visibility:visible; 
 
    } 
 
} 
 
@-webkit-keyframes admin-popup-fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    visibility:hidden; 
 
    } 
 

 
    to { 
 
    opacity: 1; 
 
    visibility:visible; 
 
    } 
 
} 
 

 
@keyframes admin-popup-fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    visibility:hidden; 
 
    } 
 

 
    to { 
 
    opacity: 1; 
 
    visibility:visible; 
 
    } 
 
} 
 

 
.modal-content { 
 
    border: 5px solid #5fb9e4; 
 
    margin-top: 10%; 
 
    background-image: url(http://www.dummocrats.com/reagan/reagan_lone_plane.JPG); 
 
    background-size: 100% 100%; 
 
    color: #101e54; 
 
} 
 

 
button{margin:40px;}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click here</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade-in" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Когда я запускаю этот фрагмент кода на Firefox; мерцание не происходит. Я не знаю, что происходит в моем приложении, так что подкладка идет. Пожалуйста, помогите мне, если у вас есть идея, что влияет на мой код.

Answer 1

Вы правы в использовании translate3d. Это заставит аппаратное ускорение и во многих случаях устранит проблемы мерцания.

Для вертикального центра вашего модального диалога вы можете установить top на 50%, а второй параметр - translate3d на -50%. Как это:

.modal-dialog { 
    top: 50%; 
    transform: translate3d(0,-50%,0); 
} 

В коде вы условии, что вы также должны удалить ненужные поля в порядке, чтобы отцентрировать модальных правильно:

.modal-content { 
    margin-top:0; 
} 

@media (min-width: 768px) { 
    .modal-dialog { 
    margin: 0 auto; 
    } 
} 

Это по-прежнему очень трудно исправить вашу проблему, поскольку вы не поделились своим «настоящим» кодом, а «манекеном». Поэтому, пожалуйста, попробуйте выше, и дайте мне знать, если это сработает.