Problem in IE when Lazy Loading enabled - whitespace under slider

[juliangrahame]

[Edited to explain issue fully after further investigation and help from Sven below]
On the first load of the page, the slider height is about 3 times taller than it should be leaving lots of white-space under the .slick-slider area. After a full cycle of all slides the white-space disappears and the slider continues animating normally.

If I remove the data-lazy attribute and replace with src as normal the issue disappears.

This isn't happening on other browsers. Is this a slick issue or a css issue?

If you cannot replicate then I can arrange, please ask

Emulating other versions of IE shows this could be an IE issue in general.

J

[DesignMitZweiS]

I had similar problems, but not only in IE.
What you can do is this. Change the visibilty of your slide container to hidden and then change the visibility attribute of the class slick-initialized to visible.

.slick-content {
   visibility: hidden;
}

.slick-initialized {
   visibility: visible;
}

[juliangrahame]

Unfortunately could not get this to work. The issue is specific to ie and only happens on first cycle through slides. As soon as the second cycle begins then layout becomes normal,

I have used the data-lazy attribute for each image by the way .

J

[DesignMitZweiS]

I could reproduce your issue on IE 11.

maybe it's your div.text. I noticed that you get a scrollbar inside the slider when resizing the browser window. you are using overflow-y: auto and height: 100%. try overflow hidden or comment the whole text div out for testing maybe this one is the culprit.

[juliangrahame]

Thanks for your help Sven. Have tried what you suggest but the div.text is not the issue. Removing made no difference.

I've discovered it's the lazy loading facility in slick which must have a bug in IE. When I remove it, all is good.

So I was loading each of the images like

<img data-lazy="/img/img1.png" alt="" title="">

Now I switch back to:

<img src="/img/img1.png" alt="" title="">

And the whitespace disapears. However the reason I turned on the lazy loading was because it cured a flash of all images on a fresh page load.

Need to report a potential bug perhaps

J

[paulmsmith]

@juliangrahame I had this issue. If you have css for the img setting the width to 100%, try changing that to max-width: 100% (if the layout will allow).

[dleroux]

Anyone found a solution for this? Unfortunate because without this you can't make it truly responsive with lazy load.

[rcherny]

We are currently trying this one:

img[data-lazy] {
    max-height: 50px;
}

(and the 50px value is arbitrary)

Not sure if it breaks anything anywhere else, but the problem seems to be related to the existence of the img tag without a src attribute. Another thing we toyed with was setting a class on the imgs in question, and an onload handler for them that removes the class.

Will follow up here if this tests ... poorly ...

[dleroux]

I ended up setting autoheight to true in the options and it worked.

[rcherny]

Interesting. We were seeing it just measuring the img elements without src attributes incorrectly. We'll take a look at that autoheight setting though.

[siestetix]

I don't see any autoheight option in the slick slider. Are you referring to the css height: auto?

[renaard]

The option is called adaptiveHeight. Here is how I fixed the IE bug, I added adaptiveHeight:true and set my first image with an SRC and the following images with data-lazy.

[siestetix]

so in the end this is still not fixed, right?

[siestetix]

@kenwheeler can you help with this?

[tomhicz]

rcherny's fix above seems to work for me, although I still need to do more extensive testing.

[markat1]

Anyone solved this problem yet? if not, I tried lazy loading only first picture and then it seems to fix issue with height, but that results in 2nd picture loads first for just a second. :/

[DrewRHill]

I ran across the same issue, found the following will work:

img[data-lazy]{
width:0;
height:0;
}

[gausarts]

This isn't happening on other browsers. Is this a slick issue or a css issue?

AFAIK if you are using a placeholder image, this is not the Slick library issue, but more about the way 1px images rendered by browsers. I don't know the correct technical word to identify this.

You can easily reproduce it without Slick library, just plain HTML with 1px image SRC and the non-regular target WIDTH and HEIGHT:

Non-regular dimensions:
http://jsfiddle.net/z6ge4xnj/
http://jsfiddle.net/z6ge4xnj/3/

Regular or square dimensions:
http://jsfiddle.net/z6ge4xnj/1/

It seems to look good with squares, but not with non-regular dimensions.
Notice how the 1px image is taller than the rest while their dimensions are similar.

The issue only applies when using lazyload ondemand, but relatively not with Progressive loading.

Anyone found a solution for this? Unfortunate because without this you can't make it truly responsive with lazy load.

Some solution is proposed above. One not mentioned already is aspect ratio.
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29

You can probably set dynamic aspect ratio using your custom JS, but may result in a FOUC till JS kicks in. Using plain CSS with relevant classes may reduce such FOUC .

This is just example based on above references.
Putting this here for a quick reference, adjust them accordingly. Using ::pseudo selector is also possible if no need to support dynamic or multiple device-dependent aspect ratio by JS. In my case I need it, so please bear with it.

/** The container for IMG, IFRAME, etc. */
.media--ratio {
  display: block;
  height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* padding-top: 30px; IE7 fix */
}

/* Aspect ratio element where .media__element can be: IMG, IFRAME. */
.media--ratio .media__element {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/** Modifier classes for aspect ratio. */
/* 1:1 ratio */
.media--ratio--11 {
  padding-bottom: 100%;
}

/* 3:2 ratio */
.media--ratio--32 {
  padding-bottom: 66.66%;
}

/* 4:3 ratio */
.media--ratio--43 {
  padding-bottom: 75%;
}

/* 8:5 ratio */
.media--ratio--85 {
  padding-bottom: 62.5%;
}

/* 16:9 ratio */
.media--ratio--169 {
  padding-bottom: 56.25%;
}

Example expected markup when using the above. I know extra markups, but works consistently. If you want less markups, and don't need multiple device-dependent aspect ratio, use ::pseudo selector for the above instead.

<div class="slide__media">
  <div class="media media--ratio media--ratio--169">
     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy="/path/to/image.jpg" alt="">
  </div>
</div>
</div>

If you are using a CMS, in my case Drupal, read more the relevant issue, otherwise ignore:
https://www.drupal.org/node/2795415

Hope useful to anyone having this issue.

[mattiapaiano]

I ran across the same issue on IE, this works for me:

.slick-slide img.slick-loading { display: none; }