Проблемы с прокруткой iOS во встроенном веб-сайте с помощью iframe

Question

У меня проблема с iframes на iOS (Safari) .

Мы используем веб-страницу на нашей веб-странице через iframe - она ​​отлично смотрится на ПК и на Android,но на iOS весь вид нарушен, и я не могу заставить прокручиваемый iframe работать на iOS больше.

Мы использовали для исправления проблемы прокрутки iOS вне самого iframe (вdiv) с:

   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: fixed;

К сожалению, это больше не работает, поэтому мы сняли его.Это как выглядит iframe прямо сейчас :

    <div class="nobottommargin">

            <p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
    </div>

Есть идеи, как решить эту проблему или какие другие альтернативы можно использовать здесь?

Редактировать: то, что я тоже пробовал, но безуспешно:

• touch-action: auto на теге iframe
• scrolling="no" на теге iframe
• pointer-events: none

Редактировать 2 : сейчас работает прокрутка, НО, при прокрутке вниз, в середине отключается мой iframe.Выпуск только на iOS снова (отлично выглядит на Android и ПК).

Вот рабочий код прокрутки iOS с ошибкой кадрирования iframe, который у меня есть:

<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
    <div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
            <iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes">   </iframe>
    </div>
</div>

Редактировать 3: Я также попытался удалить все CSS, которые вынуждают браузер использовать GPU:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

К сожалению, это не исправило ошибку iframe iOS (пробовал с iOS 9 и 11).

Edit 4: Попытка исправить проблему обрезки iframe с помощью скрипта, чтобы высота iframe была такой же, как и у всего тела.Еще раз, я потерпел неудачу.

<script>
    $(function() {
        var iframe = $("#iframe_test");    
        iframe.load(function() {
            $("body").height(iframe.height());
        });
    });
</script>

Answer 1

У меня уже давно есть эта проблема, и, наконец, я нашел исправление, которое работает для меня, уменьшив ширину div, исчезающего в iframe.Мой был 100%, и сокращение до 95% решило это.Я не уверен насчет фактической максимальной ширины в пикселях, но думаю, что она должна быть меньше ширины экрана.Я перепробовал все трюки css, которые вы упомянули, и даже больше, но это единственное, что сработало.

Answer 2

Для решения этой проблемы может потребоваться добавить внешний JavaScript-код с медиа-запросом, который в настоящее время применяется к каждому отдельному дисплею.

Answer 3

Чтобы это исправить.Вам необходимо специально установить высоту в iframe.

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }
    <div class="wrapper">
      <iframe
        style="height: 500px"
      ></iframe>
    </div>

Самое сложное - получить высоту содержимого iframe.Вы можете позволить iframe сообщить родительской странице, используя window.postMessage, если вы являетесь владельцем iframe.В противном случае вам необходимо периодически проверять высоту, пока вы не решите, что она зафиксирована.

var iframe = document.querySelector('iframe');
var setHeight = function(height) {
  iframe.style.height = height + 'px';
};
var getHeight = function() {
  return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
  var height = getHeight();
  if (prevHeight !== height) {
    prevHeight = height;
    setTimeout(adjustHeight, 2000);
  } else {
    setHeight(height);
  }
};
setTimeout(adjustHeight, 2000);

Answer 4

Проверьте это на вашем iPhone, прокрутка работает плавно.

.nobottommargin {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}

<div class="nobottommargin">
  <iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>