视口外的图像没有加载

Question

我使用Disqus对我的Ghost模板发表评论，但我遇到了麻烦。 如果<iframe>内的图像不在视口范围内，则不会加载。

我可以找到调试：

• 如果我从overflow: auto移除.surface-container，则会显示图片。
• 如果我从height: 100%移除.surface-container，则会显示图片。
• 如果缩小浏览器，则会显示图像。

但如果我删除任何这些属性抽屉不能正常工作，如果你打开抽屉，网站会滚动。

它会成为浏览器问题，而不是与CSS相关的问题：/

Fiddle

Real Scenario

Answer 1

试试这个：

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

更新2：

Fiiddle