Содержимое iframe отображается за пределами iframe на iOS

Question

Вот скрипка (jsfiddle.net/salman/RQBra/show/), которая демонстрирует проблему, с которой я столкнулся. Фрагменты отображаются как ожидалось во всех браузерах (включая Safari 5 для Windows). Но когда я просмотрел страницу на двух устройствах iOS (iPad и iPhone), содержимое iframe переполнилось и покрыло всю область с правой стороны iframe. Вот скриншот страницы, которая использует подобные плавающие фреймы:

Как я могу обойти эту проблему?

Answer 1

Хм, попробуйте обернуть iframe в div, но не ограничивать ширину и высоту iframe сами по себе.

Answer 2

Вы можете исправить это в div, но на iPhone он не будет прокручиваться без какого-либо javascript. Я сделал скрипку, которая показывает, как вы можете исправить размер iframe.

http://jsfiddle.net/RQBra/29/

в основном, вы обернуть IFRAME в обертку и дать ему немного CSS:

#wrapper { 
position:relative; 
z-index:1; 
width:400px; 
height:400px; 
overflow:scroll; 
} 

Answer 3

Я предполагаю, что внутри Iframe есть HTML-файл, поэтому в HTML обернуть содержимое в обертку div

#wrapper { 
position: relative; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
} 

это размер wil л быть относительно HTML тела, чем viewportSizes может быть, как вы хотите второй ряд манипуляционная мерцает на Iframe мыши, происходит в КСН ...

Answer 4

Обходной для вашего конкретного случая, чтобы заменить на <embed> элемент.

<embed src="..." type="text/html" width="400" height="400"></embed> 

Это будет иметь желаемый эффект на Safari Mobile и клип содержание к указанным width и height размеров вместо автоматического определения размера его. Тем не менее, встраивание специально не предназначено для содержимого HTML, и нежелательные эффекты могут возникнуть при работе с прокруткой, contentWindow и в разных средах (это необязательно отображается изначально), поэтому проверьте этот пример перед его использованием.

W3C:

Элемент представляет собой точку интеграции для внешнего применения (как правило, не-HTML) или интерактивного содержимого.