Описание ошибки iOS WebKit iframe
iOS WebKit изменяет размеры iframe до полного размера их содержимого (см. рис. ниже). Эта ошибка известна с 2016 года и до сих пор не устранена в iOS 11: https://bugs.webkit.org/show_bug.cgi?id=155198
Мои текущие выводы
<сильный>1. Для фиксированного содержимого iframe (например, видео)
Достаточно применить CSS ниже, но он предотвращает прокрутку содержимого iframe.
.fixed iframe {
width: 0;
height: 0;
min-width: 100%;
min-height: 100%;
}
<сильный>2. Для прокручиваемого содержимого iframe (например, страниц)
- Нам нужны два контейнера iframe: один в качестве границы (фиксированный размер) и второй в качестве области прокрутки.
- Чтобы соответствовать содержимому iframe, его контейнер div должен быть определен в пикселях. Любые относительные меры (например, %, vw/vh) не работают.
На некоторых страницах RWD (скажем, с «неполным RWD») возникает переполнение iframe (iframe не помещается в контейнер iframe). К сожалению, мы не можем исправить это снаружи iframe, и для решения этой проблемы документ внутри iframe требует как минимум:
body { max-width: 100vw !important; }
При желании мы можем масштабировать содержимое iframe в крайнем случае.
Из-за 2, чтобы сохранить пропорции контейнера, нам нужно использовать как минимум медиа-запросы CSS или JS для регулировки его высоты.
Некоторые неполные решения:
- https://github.com/ampproject/amphtml/issues/11133
- https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/
- Внешний файл HTML в содержимом всплывающего окна Bootstrap
- Как заставить IFrame реагировать на iOS Сафари?
- Автоматическая высота iFrame (CSS)
- Заставьте iframe автоматически регулировать высоту в соответствии с содержимым без с полосой прокрутки?
- Прокрутка iframe iOS 8
- iOS8 Safari -webkit-overflow-scrolling: touch; выпуск
Мой обходной путь опубликован в ответе.