Unable to scroll iframe on mobile iOS Safari

Even with overflow set to scroll, it is not possible to get google iframe forms in scroll to scroll, instead the background underneath it keeps scrolling on mobile. It scrolls inside the iframe just fine on desktop chrome / safari even when I change device to mobile on chrome desktop.

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