Есть 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;}
}
При клике по ссылке
<a href="bla-bla.html" onclick="return showModal(this);">ссылка</a>
iframe наполняется сторонним контентом при помощи скрипта
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;
};
код контента приблизительно таков:
<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! отсутствует, чтобы body растягивалось на относительную высоту iframe. (по совету на одном из форумов).
Выглядит примерно так:
Проблема вот в чем:
Во всех браузерах iframe отображается корректно, и overflow: hidden; работает безотказно. Даже в Safari(PC-версия).
Но, только дело доходит до Safari-mobile, контент iframe вылазит за его пределы по высоте + overflow: hidden; не работает.
Помогите, товарищи. 5 день маюсь. На пространствах русскоязычного Google не нашел схожей проблемы. My English вэри бэд, а с переводчиком - вся суть вопроса не улавливается.
Проблема происходит на
данном сайте (временно выложил для теста).
