モーダル閉じるボタンwith translate3d

Question

クイックビューモーダルでIpadでスクロールする際に問題が発生しました。問題はモーダルをスクロールしようとしていたことですが、ページ自体はモーダルではなくスクロールしていました。私は.modal * {-webkit-transform:translate3d(0,0,0)を使ってスクロールの問題を修正しました。ただし、モーダルxボタンはモーダルを閉じません。モーダルの外側に触れると閉じますが、クローズボタンの機能はすべてのユーザーがモーダルの外側に触れることを知っているとは限りません。

<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

CSSセレクタを使用して遊んだ後、それを分かりました。これはこれは、すべてのモーダルヘッダを除く.modalの子どもたちとその子供たち

にルールを適用します

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

将来的に誰にもお役に立てば幸いです