div内的div iframe with overflow：hidden（仅限Chrome）

Question

我在div里面有一个iframe。 iframe绝对位于div界限之外。我想通过在div中添加overflow：hidden来剪辑iframe，但是它会将div中的iframe移位而不是隐藏它。

问题出现在Chrome中，在Firefox中正常运行。

#container {  
  height: 200px;
  width: 300px;
  position: relative;
  border: black 1px solid;  
  overflow: hidden;
}

#nested {
  position: absolute;
  top: 20px;
  left: 350px;
  width: 100px;
  height: 100px;
  border: red 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <iframe id="nested" src="https://wikipedia.org/">  
  </iframe>
</div>

解决方法：从嵌套iframe中删除position: absolute规则，然后添加display: none。然后在JavaScript中设置position: absolute并删除display: none：

setTimeout(function() {
    $("#nested").css({
        display: "",
        position: "absolute"
    });
}, 300);

300毫秒的延迟有时是不够的。