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; 
    } 
} 

它仍然是非常困難的，因爲你解決你的問題沒有分享你的「真實」的代碼，而是一個「虛擬」代替。所以請嘗試以上，並讓我知道它是否工作。