3
オーバーフローがスクロールするように設定されていても、スクロールオーバーレイでGoogleフォームiframeを取得できず、その下の背景がモバイルでスクロールし続けます。それはデスクトップChrome/Safari上のiframe内をスクロールします。たとえ私がデスクトップChrome上のモバイルにデバイスを変更したとしても。モバイルiOS Safariで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;
}
}
}