Images out of viewport no loading

browser, css, disqus, html

Solution

Try out this:

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

Update 2:

Fiiddle

Problem

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

Original source