I am currently facing an issue with the iframe on my website. Whenever the Make an Appointment button is clicked, the iframe displays a contact form with multiple input fields.
Although everything seems to be functioning properly, I have noticed that on iOS devices (such as iPad and iPhone 5/6 - tested on Safari and Chrome), the form can be dragged beyond the width and height of its container. This behavior should only allow vertical scrolling, similar to how it works on Android devices. Refer to the screenshot below for clarification.
Despite searching through various discussions on platforms like S/O, I have yet to come across any relevant questions or answers related to this specific quirk in iOS devices/browsers.
Below is the code snippet:
HTML:
<div id='button'><button id='contact'>MAKE AN APPOINTMENT</button></div>
<div id="block"></div>
<div id="iframecontainer">
<a id='close' href='#'>X</a>
<div id="loader"></div>
<iframe></iframe>
</div>
JQuery:
$('document').ready(function() {
$('#contact').click(function () {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#header-wrapper').css("visibility", "hidden");
var width = $(window).width();
$('#iframecontainer iframe').attr('src', 'http://a-link-to-my-iframe.html');
if (width > 850) {
$('#iframecontainer').css('width', '790px');
$('#iframecontainer').css('margin-left', '-395px');
}
else {
$('#iframecontainer').css('width', '310px');
$('#iframecontainer').css('margin-left', '-155px');
}
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
Additionally, here is the CSS used in this context:
#contact {
color: #c2c2c2;
background: #151515;
border: 1px solid #c2c2c2;
padding: 13px 26px;
text-decoration: underline;
font-family: inherit;
letter-spacing: 2px;
font-size: 18px;
margin: 0 auto;
}
#iframecontainer {
width:75%;
height: auto;
display: none;
position: fixed;
-webkit-overflow-scrolling:touch;
overflow-y: auto;
height:600px;
top: 10%;
background:#FFF;
border: 1px solid #666;
box-shadow: 2px 2px 40px #222;
z-index: 999999;
left: 50%;
margin-left: -395px;
}
#iframecontainer iframe {
width: 100%;
height: 600px;
position: absolute;
border: none;
}
#loader {
width: 250px;
height: 250px;
margin:auto;
}
#block {
background: #000;
opacity:0.6;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
display:none;
}
Lastly, you can view a screen shot illustrating the issue by clicking here.
Is there a specific method to prevent this draggable behavior on iOS devices?