iframe - offsetHeight太大

Question

不是在寻找一个编码解决方案，但是如果有人之前碰到过这个问题我会很好奇并且可以向我提供一些故障排除提示。我真的坚持这个错误，部分是因为我只能在生产中重现，而不是在本地重现。

我有一个依赖于指令的iframe来根据子内容调整父容器的大小。我将此属性指令粘贴到我的应用程序的最外层div上，它抓取该元素的高度并将其发送给父元素。然后它监视该元素的变化。

问题：它在本地工作得很好，但是当我将它部署到生产站点时，它从元素中获取的offsetHeight太大（如6,000px时应该只有2,000px左右）。并且不仅仅是我测试的这个网站 - 这个问题发生在几个网站上，各不相同。

我注意到此问题仅在刷新页面时发生。事实上，如果我点击应用程序中的链接，页面会正确调整大小，如果我点击后退按钮，则会再次正确调整大小。但如果我第一次加载主页或刷新页面，则元素上的offsetHeight是巨大的。

这里是指令的样子：

return {
  link: function( scope, elem, attrs ) {
    if (webPluginCommunicator.isInIframe()) {
      var lastHeight;
      var checkHeight = function() {
        if (lastHeight !== elem.prop('offsetHeight')) {
          lastHeight = elem.prop('offsetHeight');
          webPluginCommunicator.updateIframeHeight(false, lastHeight);
        }
        $timeout(checkHeight,150);
      };
      checkHeight();
    }
  }
};

这就是HTML的样子：

    <div class="body-grid" id="wrapper" element-height-change >

我觉得我错过了关于offsetHeight或页面加载时高度计算行为的一些关键事实。有任何见解赞赏！

Answer 1

原来如此！这里的答案，万一有人想知道，有一个

min-height: 100vh;

在我的包含div的body-grid类中。当然，这确实会混淆height指令，它会持续调整大小，直到帧达到内部内容的大小。

为什么这不会在当地重现仍然感到困惑，但很高兴它已经修好了。