Загрузка PDF в iframe не работает, когда внешний контейнер переведен CSS в MS Edge - PullRequest
Новая
       20

Загрузка PDF в iframe не работает, когда внешний контейнер переведен CSS в MS Edge

0 голосов
/ 29 мая 2019

У меня есть веб-приложение, в котором я поддерживаю вложения. Когда пользователь присоединяет PDF-файл к моему приложению и когда пользователь нажимает на ссылку вложения, я открываю PDF-файл, устанавливая его URL-адрес в источнике iframe внутри контейнера.

PDF открывается правильно во всех браузерах, кроме Microsoft Edge . Углубившись в код, я обнаружил, что проблема связана с анимацией, которую я использую для открытия контейнера. Это мой HTML. 

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>MS Edge PDF in Iframe Not Visible</title>
      <style type="text/css">
        .position-fixed {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }
        .modal-overlay {
          overflow-y: scroll;
          background-color: #e6e6e6;
        }
        .modal-header {
          height: 40px;
          width: 100%;
          padding-top: 20px;
          background-color: #777;
          color: #fff;
          text-align: center;
        }
        .modal-body {
          top: 60px;
          padding: 30px;
          background-color: #4f4f4f;
        }
        .modal-animator {
          -webkit-animation: slide-in-up 1s 0ms ease forwards;
                  animation: slide-in-up 1s 0ms ease forwards;
        }
        @-webkit-keyframes slide-in-up {
          from {
            opacity: 0;
            -webkit-transform: translateY(25%);
                    transform: translateY(25%);
          } to {
            opacity: 1;
            -webkit-transform: translateY(0%);
                    transform: translateY(0%);
          }
        }
        @keyframes slide-in-up {
          from {
            opacity: 0;
            -webkit-transform: translateY(25%);
                    transform: translateY(25%);
          } to {
            opacity: 1;
            -webkit-transform: translateY(0%);
                    transform: translateY(0%);
          }
        }
      </style>
   </head>
   <body>
      <div id="modalDialog" class="position-fixed modal-overlay">
         <div class="modal-header">
            PDF in Iframe is not visible issue (MS Edge)
         </div>
         <div class="position-fixed modal-body">
            <iframe width="100%" height="100%" frameborder="0" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
            </iframe>
         </div>
      </div>
      <script type="text/javascript">
        window.onload = function() {
          document.getElementById('modalDialog').className += ' modal-animator';
        };
      </script>
   </body>
</html>

PDF открывается правильно, если я удаляю свойство forwards моей анимации. Даже если я добавлю transform: translateY(0%) в свой класс modal-overlay и удалю анимацию, iframe не показывает PDF. Может кто-нибудь сказать мне, что не так с режимом автозаполнения анимации, используемым здесь?

Я добавил демо здесь

...