交叉点观察者polyfill不工作Safari答案

【问题标题】：intersection observer polyfill not working Safari交叉点观察者polyfill不工作Safari
【发布时间】：2018-06-27 11:51:19
【问题描述】：

我需要检测从另一个域加载的 iframe 是否在视口中。

这在 Chromem、Firefox 和 IE 中运行良好，称为 Intersection Observer。但是，这在 Safari 中不起作用。

已经为此创建了一个 polyfill：Github link，并且应该也可以在 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-observer-test.html 页面返回了所有 25 个测试的通过。

谁有办法解决这个问题？

【问题讨论】：

如果可能，尝试实现代码sn-p。

标签： javascript iframe safari intersection-observer

【解决方案1】：

我在 github 上看到一个问题，其中概述了 safari 由于怪癖模式而获得不正确的高度：https://github.com/w3c/IntersectionObserver/issues/282。可能会添加

<!DOCTYPE html>
<html>

可以解决。

【讨论】：