Disqus Avatar Cards Not Displaying Correctly

[Artiavis]

I've noticed on both my blog and on your sample that the image cards from Disqus don't display the images properly.

The relevant HTML is:

<div class="avatar hovercard">
   <a href="http://disqus.com/disqus_someid/" class="user" data-action="profile" data-user="somenums">
       <img alt="Avatar" src="//a.disquscdn.com/uploads/users/some/nums/avatarnum.jpg?morenums">
   </a>
</div>

The <img> src is missing.

Edit:

Found a quick fix, not sure why it works. See my post below.

[oswaldoacauan]

Hmm, dont think its a Ghostium problem since Disqus is a third party plugin anyway i will check on weekend.

[Artiavis]

It's hard to say for sure, but when I switch my blog back to the Casper theme, or other custom themes, the images do load correctly. I'm guessing there's something subtle going on.

[Artiavis]

I think I found part of the issue. In default.hbs, by the part

<div class="drawer-overlay"></div>
<main id="container" role="main" class="container">
  <div class="surface">
    <div class="surface-container">
      <div data-pjax-container class="content">
        {{{body}}}
      </div>
    </div>
  </div>
</main>

for some reason, the presence of <div class="surface-container"></div> throws off the pictures.

• Deleting only that <div> set allows the avatar images to load - however, it can also remove the ability to scroll when viewing pages with at certain browser dimensions.
• I tried renaming the div's class from "surface-container" to "surface-contianer" in both the CSS and the default file to see whether it was a naming issue, but it didn't help.

[oswaldoacauan]

@Artiavis Any news about this? I'm trying to resolve this without broke drawer and im having trouble. Its seems to be a browser issue, i posted a queston on StackOverflow with hope someone already have this same issue :(

[corbpaul]

Just tested this in Chrome - if you remove overflow: auto using the inspector it breaks the drawer but if you remove it from the css file and reload both the images load and the drawer works.

[oswaldoacauan]

@corbpaul i try it, but if you scroll the page and then open the drawer, page scroll to the top

[corbpaul]

Hmmm... maybe add js on scroll to add css?

$('.surface-container').css('overflow', 'auto');

would that work?

[oswaldoacauan]

@corbpaul maybe, but i don't like this approach. We can fix it with CSS only i hope

[fmathey]

Hello,

I recently set up Disqus and the problem still appears on some pages. For information, I implemented via Angular Directive

Do you have an idea to solve this problem ?

Thank you :-)