Содержимое Safari Mobil iFrame вне поля зрения не отображается - PullRequest
Новая
       42

Содержимое Safari Mobil iFrame вне поля зрения не отображается

2 голосов
/ 08 марта 2019

Задача

Открыть https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/ на iPhone и втором iFrames div содержимое не отображается перед касанием / прокруткой.

Видео: https://youtu.be/opEx0HMBvWc

Подробнее

У меня есть виджет <iframe>, который отображается под сгибом страницы при загрузке страницы. 

<iframe class="iframe" src="widget.html"></iframe>

Это загрузка сайта под моим контролем, где я хочу прикрепленный / фиксированный элемент сверху, а прокручиваемый контент ниже. Из-за фиксированного элемента я не могу применить оберточный div на родительской странице и симулировать прокрутку, как описано здесь https://stackoverflow.com/a/32993873/9619535.

В качестве альтернативы можно сделать прокрутку iframe внутри с помощью position:fixed и т. Д., Как описано здесь: https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535

Но содержимое этого div не отображается, если iFrame не виден при загрузке страницы. Только после первого касания появляется контент: https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6

image

Debugging

Использование XCode Simulator ошибка также может быть воспроизведена. С Safari Inspect элемент есть, и все css выглядит нормально:

image

Обходные!

Ошибка не появляется при использовании -webkit-overflow-scrolling: auto; вместо touch, но прокрутка импульса желательна / необходима для тактильного удобства использования.

Похожие вопросы

Также ссылка здесь: https://github.com/PierBover/ios-iframe-fix/issues/5

Эти решения не помогли:

Ответы [ 2 ]

1 голос
/ 11 марта 2019

Проблема возникла из https://github.com/PierBover/ios-iframe-fix * position:fixed;top:0px и т. Д.

Того же можно достичь с помощью height:100% на обертке, и ошибка не возникает: 

  .scrollable {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

через https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

0 голосов
/ 11 марта 2019

Первая настройка -webkit-overflow-scrolling: auto; и затем переключение на touch после первого касания , кажется, работает 90% : 

<script type="text/javascript">
const el = document.getElementsByClassName('scrollable')[0]
const settouch = (e) => el.style.webkitOverflowScrolling = 'touch' 
el.addEventListener("touchend", settouch, false);
</script>

Но 10% :если iFrame отображается ниже сгиба, и пользователь прокручивает вверх там, где iFrame не реагирует (уже в верхней части страницы), содержащаяся страница будет прокручиваться, каскад будет срабатывать и div больше не будет отображаться.

Смотрите видео здесь: https://youtu.be/opEx0HMBvWc

...