Problems with iframe only in Safari-mobile. How to decide?

I

Igor Spurgyash2016-04-25 15:09:03

css

Igor Spurgyash, 2016-04-25 15:09:03

There is an iframe:

<div id="modalWindow" class="modal-window">
    <iframe id="modalContent"></iframe>
</div>

.modal-window {position: fixed; top: 5%; height: 80%; width: 80%; padding: 5% 5% 0;}
iframe {width: 86%; height: 85%; position: absolute; top: 10%; left: 7%;}
@media (-webkit-min-device-pixel-ratio: 0) {
  iframe {position: fixed;}
}

When clicking on a link

<a href="bla-bla.html" onclick="return showModal(this);">ссылка</a>

iframe is filled with third-party content using a script

function showModal(self) {
      var modal = $('#modalWindow');
      $('body').css('overflow', 'hidden').css('margin-right', scrollWidth());
      modal.fadeIn();
      var iframe = document.getElementById('modalContent');
      iframe.src = self.href;
      return false;
  };

the content code is something like this:

<html>
<head>
  <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />	
</head>
<body>
  <h1></h1>
  <div class="col1"></div>
  <div class="col2"></div>
</body>
</html>

DOCTYPE! is missing to make the body stretch to the relative height of the iframe. (according to the advice on one of the forums).
It looks something like this:

The problem is this:
In all browsers, the iframe is displayed correctly, and overflow: hidden; works flawlessly. Even in Safari (PC version).

But, as soon as it comes to Safari-mobile, the iframe content will go beyond its height + overflow: hidden; does not work.

Help, comrades. 5 day toil. On the spaces of the Russian-speaking Google did not find a similar problem. My English is variably bad, but with a translator - the whole essence of the issue is not captured.
The problem occurs on this site (temporarily laid out for the test).