web-dev-qa-db-ja.com

モバイルiOSSafariでiframeをスクロールできない

オーバーフローがスクロールに設定されていても、オーバーレイでGoogleフォームのiframeをスクロールさせることはできません。代わりに、下の背景がモバイルでスクロールし続けます。デスクトップクロームでデバイスをモバイルデバイスに変更した場合でも、デスクトップクローム/サファリではiframe内を問題なくスクロールします。

HTML：

     <div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" aria-labelledby="follow-modal">
      <div class="modal-background"></div>
      <div class="modal-wrapper">
        <div class="survey-wrapper">
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScYLpClPexPWtT9UETnksKMKnzH5xRgs-UikH21Ktl6PhJQ-w/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
        </div>
      </div>
    </div>

SCSS：

#follow-modal {
  .modal-background {
    background-color: rgba(0,0,0,.9);
  }
  .modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .survey-wrapper {
    position: relative;
    background-color: transparent;
    text-align: center;
    margin-top: 100px;
    width: 700px;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    @media (max-width: $screen-md-min) {
      margin-left: 10px;
      margin-right: 10px;
    }
    iframe {
      width: 100%;
      height: 600px;
    }
  }
  h3 {
    margin-bottom: 15px;
  }
  button.close {
    color: white;
    position: absolute;
    top: -60px;
    right: -50px;
    opacity: 1;
    @media (max-width: $screen-md-min) {
      right: -20px;
    }
    &:hover {
      color: white;
    }
  }
}
htmlcssiframemobile-safarigoogle-form
7
Chris

位置属性に注意してください。

<iframe src="www.website.com/" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>

位置を「絶対」に設定して修正しました。

*これらの属性も試してみてください：

scrolling = "no"（または "yes"、必要に応じて）

オーバーフロー：スクロール; （または「スクロール」の代わりに、visible | hidden | auto | initial | inherit;のいずれかを使用します）

4
user3495363

他の答えがあなたのために機能しない場合（それらは私のために機能しなかったので）、このコードをチェックしてください：

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe>Loading...</iframe>
</div>
6
kalpesh khule