modal schließen Knopf mit translate3d

Question

Ich hatte ein Problem mit dem Scrollen auf einem Ipad mit einem Quickview Modal. Das Problem war, dass ich versuchte, auf dem Modal zu scrollen, aber die Seite selbst scrollte, nicht das Modal. Ich habe .modal * {-webkit-transform:translate3d(0,0,0) verwendet, was das Scrollen behoben hat. Allerdings schließt jetzt die Modal-X-Schaltfläche das Modal nicht. Wenn ich außerhalb des Modales berühre, schließt es sich, aber ich möchte die Funktionalität des Schließen-Knopfes behalten, da nicht alle Benutzer wissen würden, das Modal zu berühren.

<div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <svg class="icon close--modal"> 
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://10.30.2.54:300/images/sprite.svg#close--modal"></use> 
      </svg> 
      </button> 
      <h4 class="modal-title">Quick View</h4> 
     </div> 

Answer 1

Nach dem Spielen mit den CSS-Selektoren, herausgefunden es. Hoffe, dass dies jemand in der Zukunft

hilft

.modal * :not(.modal-header *) {-webkit-transform: translate3d(0,0,0);} 

Dadurch wird die Regel für alle Kinder von .modal mit Ausnahme des modal-Header gelten und seine Kinder