Fancybox modal funktioniert nicht innerhalb iframe

Question

Fancybox Modal Dialog funktioniert nicht in iPhone Safari! Gibt es Gründe?

<div class="m39-modal" data-component="m39-modal" id="modal_true"> 
    <button data-trigger="true" class="m39-modal__trigger">Modal Trigger</button> 
<div data-content="true" class="m39-modal__container" role="dialog" aria-expanded="false"> 
    <div class="m39-modal__dialog"> 
     <div class="m39-modal__header"> 
      <div class="m39-modal__title">Terms &amp; Conditions</div> 
      <button data-close="true" class="m39-modal__button--close">Close</button> 
     </div> 
     <div class="m39-modal__content"> 

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut facilisis metus, varius elementum leo. Sed ut justo at magna pulvinar commodo non quis elit. Etiam cursus turpis sagittis sapien vulputate, sed sagittis nisi interdum. Suspendisse id neque non elit feugiat luctus. Aenean venenatis iaculis gravida. Nulla consectetur luctus neque ut fermentum. Fusce tellus risus, laoreet lacinia purus sed, tempor interdum nunc. </p><p>Phasellus in lorem justo. Ut rhoncus turpis at arcu dapibus, at lacinia lacus elementum. Donec elementum consectetur justo, non hendrerit augue dictum sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam fringilla dui eget orci fermentum, vitae porttitor massa mollis. Duis luctus, eros quis vulputate convallis, sapien neque condimentum neque, vitae fermentum turpis sapien in ligula.</p><p>Phasellus iaculis odio a urna hendrerit, in iaculis odio ultricies. Nunc sed lacinia nulla. Vestibulum malesuada nunc id sapien volutpat luctus. Nam non fermentum metus. Nullam fermentum massa ut sem tristique, sed rhoncus leo vestibulum. Nullam egestas faucibus hendrerit. Duis risus felis, pulvinar eget risus in, dapibus varius metus. Vivamus turpis magna, sodales ut consequat at, auctor eu orci.</p> 

     </div> 
    </div> 
</div> 

Sie können den Code auf Ihrem iPhone Safari inspizieren, Modal-Dialog nicht funktioniert, aber auf android es tut. If you tried to enter this link through your iphone with safari browser http://molham.ae/m39-modal.html

Wenn Sie auf (05) klicken, sollte die Zahl Popup angezeigt werden, wenn Sie versuchen, über den Desktop-Browser funktioniert es.

Answer 1

Ich bin ziemlich sicher, dass das Problem mit, wie Safari Übergänge behandelt. Können Sie die folgende css-Regel auf der Seite hinzufügen, die der iframe lädt, und sehen, ob das den Fehler behebt?

.m39-modal .m39-modal__container, .m39-modal .m39-modal__dialog { -webkit-transition: opacity 0.1s; }