[Helene CParticipant]

When viewing my site in Chrome, I notice that when I use the fade effect on x-img elements, sometimes they dance/stretch a bit when I rollover and the fade behavior kicks in. See the thumbnails here: http://www.gbchealth.org.php53-15.ord1-1.websitetestlink.com/programs. Also it seems to happen on the second and third row of thumbs on this page (but not the first): http://www.gbchealth.org.php53-15.ord1-1.websitetestlink.com/about/staff. Don’t know if it might also be to do with the column layouts?

This happens in Chrome for both PC and for Mac. Any ideas?

Thanks!

[ChristianModerator]

Hey Helene,

Please compare the settings of the image that doesn’t stretch and the images that does. Based on the sourse code. They have different settings.

Hope that helps. 🙂

[Helene CParticipant]

Nope, I’m afraid that doesn’t really help… 😉 I’m not sure what settings you mean? I’ve tidied a few things and everything looks identical to me, settings-wise, and the same issue occurs.

Example:

<div  class="x-column staff-card one-fourth" style="" ><a  class="x-img x-img-link x-img-circle none"  href="/about/staff/michael-schreiber"        data-options="thumbnail: '/wp-content/uploads/2014/03/michael.jpg'"><img src="/wp-content/uploads/2014/03/michael.jpg" ></a>
<h4>Michael Schreiber</h4>
<p>Executive Director</div>
<div  class="x-column staff-card one-fourth" style="" ><a  class="x-img x-img-link x-img-circle none"  href="/about/staff/nisa-patel"        data-options="thumbnail: '/wp-content/uploads/2014/03/nisa.jpg'"><img src="/wp-content/uploads/2014/03/nisa.jpg" ></a>
<h4>Nisa Patel</h4>
<p>Program Officer</div>

Michael’s thumbnail stretches on fade and Nisa’s doesn’t. The code looks pretty much identical to me.

Is there something I’m missing..?

[KoryKeymaster]

Hey Helene,

Thanks for writing in and sorry for any confusion on this. The situation that I believe you’re describing is due to a rendering issue in Chrome. There are some ways around it, but we have not included them for various reasons in the theme as they can cause some other issues for separate situations. That being said, try the following CSS out as it should work great for you:

.x-img-link img {
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

Thanks!

[Author]

Posts