Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't scroll iframe on mobile iOS Safari

Even with overflow set to scroll, can't get the google forms iframe in an overlay to scroll, instead the background underneath keeps scrolling on mobile. It scrolls inside the iframe just fine on desktop chrome/safari, even when I change the device to a mobile one on desktop chrome.

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;
    }
  }
}
like image 365
Chris Avatar asked Apr 06 '17 17:04

Chris


2 Answers

Take care of the position Attribute.

<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>

I set the position to "absolute" and it has fixed it.

*also play with those attributes:

scrolling="no" (or "yes", depends on your need)

overflow: scroll; (or instead of "scroll", use one of those: visible|hidden|auto|initial|inherit;)

like image 70
user3495363 Avatar answered Sep 19 '22 11:09

user3495363


If other answers do not work for you (as they did not work for me), please check out this code:

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe>Loading...</iframe>
</div>
like image 37
kalpesh khule Avatar answered Sep 16 '22 11:09

kalpesh khule