Проблемы с iframe только в Safari-mobile. Как решить?
4 повідомлення
#9 років тому
Есть 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 вэри бэд, а с переводчиком - вся суть вопроса не улавливается.
Проблема происходит на посилання выложил для теста).
Додатки:
22 КБ
33 КБ
29 КБ
731 повідомлення
#9 років тому
Зачем там айфрейм? пихайте просто контент, аджаксом если нужна динамика.
5 повідомлень
#9 років тому
$('body').css('overflow', 'hidden').css('margin-right', scrollWidth());overflow:hidden не стабилнo если применыть к <body >
надо применять к <div>
$('body').css('overflow', 'hidden').css('margin-right', scrollWidth());overflow:hidden не стабилнo если применыть к <body >
надо применять к <div>
что то со шрифтами