Images out of viewport no loading

Question

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.

Debugging I could find:

• If i remove overflow: auto from .surface-container the images appear.
• If i remove height: 100% from .surface-container the images appear.
• 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 :/

Fiddle

Real Scenario

Answer 1

Try out this:

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

Update 2:

Fiiddle