CSS-Animation erzeugt Flackern auf Firefox-Browser

Question

Ich habe anpassen CSS-Animation zu bootstrap modal, aber auf Firefox-Browser einige Futter kommen, wenn ich ein Modal öffnen. Bitte sehen Sie unten Bild für ein besseres Verständnis.

ich in einen vierstelligen Code geschrieben haben, Schnipsel, was ich tat. Bitte beachten Sie, dass dies ein Dummy-Snippet nur für Code-Sharing ist.

.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>

Wenn ich dieses Snippet auf Firefox laufen; Flackern passiert nicht. Ich weiß nicht, was in meiner Anwendung passiert, damit das Futter kommt. Bitte helfen Sie mir, wenn Sie eine Idee haben, was meinen Code beeinflusst.

Answer 1

Sie verwenden translate3d korrekt. Dies wird die Hardwarebeschleunigung erzwingen und in vielen Fällen Flimmerprobleme beheben.

Um Ihren modalen Dialog vertikal zu zentrieren, können Sie top auf 50% und den zweiten Parameter in translate3d auf -50% setzen. Wie folgt aus:

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

Im Code, den Sie zur Verfügung gestellt haben müssen Sie auch unnötige Ränder, um zu entfernen, um den Modal zu Zentrum richtig:

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

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

Es ist immer noch sehr schwer zu beheben Ihr Problem, da Sie habe deinen "echten" Code nicht geteilt, sondern stattdessen einen "Dummy". Also versuchen Sie es bitte oben und lassen Sie mich wissen, ob es funktioniert.