Anzeigen von PDF in Bootstrap-modal

Question

Ich bin wirklich mit einfachen Ding kämpfen. Was ich erreichen möchte, ist einfach Anzeige PDF mit HTML <object> Tag innerhalb Bootstrap modal.

I've created Plunkr, um das Problem zu demonstrieren. Grundsätzlich unter "Arbeit PDF" ist einfach <object> Tag, das funktioniert gut. Unter "Arbeiten PDF - Kollaps" ist PDF innerhalb kollabiert div und "Nicht funktionierende PDF - modal" zeigt das Problem.

Ich dachte, vielleicht war das Problem mit display: none;, aber Kollaps Beispiel funktioniert, so dass es nicht mit der Sichtbarkeit verwandt werden kann. In Chrome, das einen nativen PDF-Viewer verwendet, funktioniert alles einwandfrei. Mein Firefox verwendet Adobe plugin, aber wenn ich zurück zu pdf.js Viewer wechsle - alles funktioniert wie erwartet.

Ich fand auch this example, die zeigt, dass die Anzeige von PDF in Modal funktioniert gut, wenn HTML innerhalb Javascript-Funktion erstellt wird. Ich kann jedoch nicht verstehen, dass dies anders ist als das, was ich versuche zu tun.

Answer 1

Ich schaffte es, mein eigenes Problem zu lösen. Es stellte sich heraus, dass CSS-Animationen dieses unerwartete Verhalten verursachten. In modals.less gibt es Stildeklaration

.modal{ 
    &.fade .modal-dialog{ 
     .translate(0, -25%); 
     .transition-transform(~"0.3s ease-out"); 
    } 
    &.in .modal-dialog { .translate(0, 0) } 
} 

Diejenigen .translate(0, -25%); und .translate(0, 0) verursachen Probleme übersetzt, so habe ich beschlossen, meine eigene mixin

.translate-none(){ 
    -webkit-transform: none; 
     -ms-transform: none; // IE9 only 
     -o-transform: none; 
      transform: none; 
} 

und es verwenden, statt solche mit Animationen

.modal{ 
    &.fade .modal-dialog { 
    .translate-none(); 
    .transition-transform(~"0.3s ease-out"); 
    } 
    &.in .modal-dialog { .translate-none() } 
} 

zu erklären

Diese deaktiviert Bootstrap modale Animation, aber ermöglicht PDF zu rendern