html – 从视口中的图像无加载

我使用disqus评论我的Ghost模板,但我有麻烦.
disqus< iframe>内的图像如果它们不在视口外,不加载.

调试我可以找到：

>如果我从.surface-container中删除overflow：auto,则出现图像.
>如果我从.surface-container中删除高度：100％,则出现图像.
>如果您缩小浏览器的图像显示.

但是,如果我删除任何这个属性,抽屉不正常工作,如果您打开抽屉,该网站滚动.

它接缝是浏览器问题,而不是与css相关的问题：/

Fiddle

Real Scenario

解决方法

试试这个：

main {
    overflow: visible;
}
.surface {
    position: absolute;
    top: 0;
    overflow: visible;
    width: 100%;
    height: 100%;
    bottom: 0;
}

更新2：

Fiiddle