10

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

Oswaldo Acauan
  • 2,730
  • 15
  • 23
  • gonna be tricky when dealing with an iframe. Just a guess but have you tried targeting the images in the iframe and setting the width to 100%; height: auto;? If this still breaks it, try setting the width of the images smaller than the width of the iframe – Matt Lambert Nov 27 '13 at 10:01
  • @MattLambert i dont think the problem are on iframe code, since removing one of the properties listed on question everything works. – Oswaldo Acauan Nov 27 '13 at 10:13
  • @OswaldoAcauan I'm on Chrome 31.x.x, The drawer is only visible @ the top and it doesnt cause anything. And, it does intrigue me on why or how the viewport affects discuss. Can you precisely point out what fails and how? – Vivek Chandra Nov 27 '13 at 20:54
  • @VivekChandra if you take a look at the fiddle, the images on disqus iframe, only load until viewport end – Oswaldo Acauan Nov 27 '13 at 23:29

1 Answers1

5

Try out this:

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

Update 2:

Fiiddle

Pandiyan Cool
  • 6,381
  • 8
  • 51
  • 87