Images display with a height of 1px on Chrome-y browsers

I use Slick on therainbowroll.com and it works like a charm except for one weird bug on Chrome (or Chromium). For some reason, subsequent slides render at 1px high, making them essentially invisible. This is probably a Chrome bug since it works wonderfully on Safari & Firefox, but I still wanted to see if anyone has a way to avoid this.

Here’s how I configure Slick:

$(document).ready(function () {
  $('.images').slick({
    dots: true,
    slide: 'img',
    lazyLoad: 'progressive',
    responsive: [
      {
        breakpoint: 760,
        settings: {
          arrows: false
        }
      }
    ]
  });
});

Anyone seen this before? Is there a fix?

[tokant]

I had the same issue but simply adding height:auto; to the img seems to work.

[kevnk]

I’m experiencing this issue in Chrome Version 40.0.2214.115 (64-bit) Mac.

Here’s my fiddle: http://jsfiddle.net/kevinkirchner/y3ns3kff/ — sometimes the bug shows, sometimes it doesn’t - check all four slides. Maybe has something to do with running slick before the images have completely loaded?

FIXED: I’ve confirmed that .slick-slide { height: auto; } fixed the issue for me — thanks @tokant