Пересечение Полифилла не работает Safari - PullRequest
Новая
       22

Пересечение Полифилла не работает Safari

0 голосов
/ 27 июня 2018

Мне нужно определить, находится ли мой iframe, загруженный из другого домена, в окне просмотра.

Это прекрасно работает в Chromem, Firefox и IE под названием Intersection Observer. Однако это не работает в Safari.

Для этого был создан polyfill: Ссылка на Github и должна работать также в Safari.

Я проверил это, используя этот код:

Сайт A: 

<html>
  <head>
  </head>
    <body>
     A lot of text here so the iframe is not inview.
     A lot of text here so the iframe is not inview.
     <br>
     <br>
     .
     .
     .
     .
     .
     .
     .
     <br>
     A lot of text here so the iframe is not inview.
    <iframe src="//siteB.com/test.html" frameborder="0" border="0" scroll="no" scrolling="no" width="300" height="250" style="border: 0px; overflow: hidden !important;"></iframe>
    </body>
    </html>

Сайт B: 

<html>
    <head>
        <script src="intersection-observer.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 
              //do work
                var io = new IntersectionObserver(
                  entries => {
                    console.log(entries);
                    if (entries["0"].isIntersecting) {
                        alert("inview");
                    } 
                  },
                  {
                    /* Using default options. Details below */
                  }
                );
                // Start observing an element
                var img1 = document.getElementById("img1");
                console.log(img1);
                io.observe(img1);
            });
        </script>
    </head> 
    <body>
        <img id="img1" src="motor.gif" style="position:absolute; top:0px; left:0px"/>
    </body>
</html>

Тем не менее, я проверил это на Iphone 6, однако он сразу же выдает предупреждение, и после щелчка по нему он больше не отображается при прокрутке вверх и вниз.

На странице intersection-наблюдаем-test.html, которую они включили, проходы возврата для всех 25 тестов.

У кого-нибудь есть решение этой проблемы?

1 Ответ

0 голосов
/ 27 августа 2018

Я обнаружил проблему на github, в которой он описал сафари, получающую неправильную высоту из-за режима причуд: https://github.com/w3c/IntersectionObserver/issues/282. Возможно добавить 

<!DOCTYPE html>
<html>

можно починить.

...