Изображения из окна просмотра без загрузки

Я использую Disqus для комментариев в моем шаблоне Ghost, но у меня возникают проблемы с ним. Изображения внутри Disqus <iframe> не загружаются, если они не отображаются в окне просмотра.

Отладка, которую я мог найти:

Если я удаляю overflow: auto из .surface-container, появляются изображения.
Если я удаляю height: 100% из .surface-container, появляются изображения.
Если вы уменьшите масштаб браузера, появятся изображения.

Но если я удалю любое из этих свойств, ящик не работает корректно, если вы откроете ящик, прокрутку сайта.

Он швы, чтобы быть проблемой браузера, а не связанной с css проблемой:/

Fiddle

Реальный сценарий

Ответы

Ответ 1

Попробуйте следующее:

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

Обновление 2:

Fiiddle