ドラッグしたときにiOSでiframeが移動する

Question

Make an Appointmentボタンをクリックすると、私のウェブサイトにiframeが表示されます。 iframeには複数の入力フィールドを持つ連絡フォームが含まれています。

すべてはうまくいきますが、何らかの理由でiOS（iPadとiPhone 5/6 - 私はSafariとChromeをテストしました）では、フォームはそのコンテナの幅と高さを超えてドラッグ可能です。 y軸にのみスクロール可能でなければなりません。 Android搭載端末のようです。下のスクリーンショットを参照してください。

私はS/O上の多数の投稿を見てきましたが、iOSデバイスやブラウザのこの特定のニュアンスに関係するQ/Aをまだ見つけていません。

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

そして、CSS：ここ

はコードである

#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; 
    border: 1px solid #555; 
    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; 
}​ 

そして、ここでのスクリーンショットであります私が言及しているもの：

iOSデバイス上でこれを無効にする具体的な方法はありますか？

Answer 1

は、私は信じ= "no" をHTML5で廃止予定して

#iframecontainer iframe { 
    width: 1px;/* Make it a very small for your viewport */ 
    min-width:100%;/* Overwrite width. Let it decides the actual width of iframe */ 
    height: 600px; 
    position: absolute; 
    border: none; 
}