视口外的图像没有加载

Question

我使用Disqus来评论我的Ghost模板,但我遇到了麻烦.<iframe>如果它们不在视口中,则不会加载Disqus内的图像.

调试我可以找到:

• 如果我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