视口外的图像没有加载

Im using Disqus for comments on my Ghost template, but im having trouble with it. The images inside Disqus <iframe> dont load if they are out of viewport.

我使用Disqus对我的Ghost模板发表评论,但我遇到了麻烦。 Disqus 中的图像如果不在视口中,则不会加载。&amp;lt;/p&amp;gt;

Debugging I could find:

调试我可以找到:

If i remove overflow: auto from .surface-container the images appear.

如果我从.surface-container中删除overflow:auto,则会显示图像。

If i remove height: 100% from .surface-container the images appear.

如果我从.surface-container中删除高度:100%,则会显示图像。

If you zoom out the browser the images appear.

如果缩小浏览器,则会显示图像。

But if i remove any of this properties the drawer not work corretcly, if you open the drawer, the site scrollsup.

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

It seams to be a browser issue and not a css-related problem :/

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

Fiddle

Real Scenario

1 个解决方案

#1

Try out this:

试试这个:

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

Update 2:

Fiiddle

#1