Can't scroll iframe on mobile iOS Safari

Question

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

Answer 1

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>