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

[ajgreenb]

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?

[kenwheeler]

I'm not seeing that happen?

[ajgreenb]

Well that's relieving, but here's what it looks like on my desktop Chrome v38.0.2125.111:

The first image loads normally, but all the rest look like above.

[EnigmaSolved]

@ajgreenb, just to rule things out, I'd recommend that you try Chrome in Safe Mode (with extensions disabled). Sometimes there can be weird effects from certain extensions (this happened with another Slick user recently).

[kenwheeler]

Also I see you are using lazyloading. Does turning that off fix this?

[ajgreenb]

@EnigmaSolved I opened Chrome in Safe Mode but that didn't change things.

@kenwheeler I've tried setting lazy loading to ondemand and progressive, but neither has gotten rid of the problem.

[kenwheeler]

No I mean literally no lazy loading

[ajgreenb]

I just tried commenting out the line with lazyLoading:, but that didn't work. The docs specify that ondemand is the default. I'll try setting it to false?

[ajgreenb]

Setting lazyLoad: false didn't work either. Have either you or @EnigmaSolved been able to reproduce the behavior?

[kenwheeler]

No I mean literally remove the data-lazy attribute from your images as well as the lazyload option

[ajgreenb]

I didn't see the note that you need to add a data-lazy attribute. So, I tried both ondemand and progressive using the data-lazy attribute, and those didn't work. Then I removed lazyload and the data-lazy attributes as you specified above and that worked once, but on refresh the problem came back. Super weird.

[kenwheeler]

Ok I'll take a closer look later, because I saw it happen one time earlier

[ajgreenb]

Cool, thanks. Looking forward to hearing what you find.

[EnigmaSolved]

I do see it happening sometimes for your site on Chrome (Version 38.0.2125.111 m) on Windows. It is inconsistent though. It seems like it may be some kind of timing issue, related to how long the images take to load (perhaps?).

[scouch15]

I'm having the same issue as well (Chrome Version 38.0.2125.122). Very inconsistent and hard to recreate. The slick-track renders with a width:1px;

[kenwheeler]

@scouch15 out of pure curiosity, does setting a min-width on your images help?

[scouch15]

I'll give that a try and let you know....

[kenwheeler]

Cool

[digipi]

Just thought I would chime in as I have the same issue. Setting a min-width on the images does resolve the issue, but isn't particularly graceful. Any ideas?

[tahirm]

I am also facing this. In my case its setting width to 5px. and its consistent in my case not inconsistent.

It works fine when i set the min-width for every slide but that isn't an options for us.
I am using 39.0.2171.71 (64-bit) version of chrome.

[kenwheeler]

Can someone reproduce this in a fiddle?

[tokant]

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

[jonas-veselka]

I also observed this in Chrome. It happens only sometimes. I solved this by initialization not on document.ready, but on window.load event (had to hide other then first images in the meantime).

No more 1px horizontal stripe appeared, however another issue occured: After the initialization the image shrinked on both width and height and on the right side appeared vertical stripe of next image. It returned to correct state after first slide. See http://jsfiddle.net/5bbrans8/

[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

[kenwheeler]

I'm going to see if there are any issues that arise from adding height auto to core, if not I'll bake that in for the next release

[ghost]

I'm having exactly the same problem. I tried the above fix but it didn't work right for me, but I fixed it in a slightly different way:

add height here:

.slick-slider .slick-track, .slick-slider .slick-list { height: 100%; }

remove height from here:

.slick-slide { height: 100%; }

Once the height was moved from .slick-slide to .slick-slider/track/list, then everything worked perfectly with Chrome.

[voblaunsane]

Have the same problem..
https://jsfiddle.net/0ts3tueq/
Works nicely on ffox 36.0.1 win7 and android, yet on both android and win7 (40.0.2214.115 m) chromes height becomes 1px.
Any ideas, pls? ;)

I should probably add that none of the suggestions above worked for me..

[Modified]

Same problem, intermittent (meaning, only happens when boss is looking! ;o).
HELP!!!

[kevnk]

Try the height fixes above @Modified

[Modified]

Sorry, @kevnk , @voblaunsane's https://jsfiddle.net/0ts3tueq/ is _consistently_ broken for me on Chrome v34 and v43, and neither of the above suggested height changes fixes the bug.
Tried (separately, obviously):

.slick-slide{height:auto !important} /* No luck. */
.slick-slide{height:100% !important} /* No luck. */
#carousel,.slick-list,.slick-track{height:100% !important} /* No luck. */
.slick-slide{height:inherited !important} /* No luck. */

[kevnk]

@Modified — are you using background images? If not, then my fiddle works with height: auto on the img — http://jsfiddle.net/kevinkirchner/y3ns3kff/

Looks like you have to set the height manually for background image slides.

[Modified]

As I said, I'm seeing this bug _only sometimes_ in my production app, in several Chrome and Chromium versions, and Chrome on Android 4.4. I cannot deliver with this behavior.

@voblaunsane's https://jsfiddle.net/0ts3tueq/ is consistently broken, and as such I think that's where the bug needs to be identified and fixed. Otherwise, how would I trust your fixes in a scenario that doesn't reproduce the problem consistently? You get my drift?

I'm now trying to replicate that jsFiddle, step by step, hoping to identify when/where exactly it appears: http://jsfiddle.net/decode/wzqtwgb1/ .

Thanks! ;o)

[ghost]

Did you try my solution from here? https://github.com/kenwheeler/slick/issues/771#issuecomment-76237035

There is definitely a calculation bug somewhere, but my solution fixed the problem in all my test cases.

[Eschon]

Had the same bug. It worked fine for me from the local file system but once I put it on the server stopped working. With height:auto; it works fine though.

[floriansegginger]

For what it's worth, I had the same problem happen, but only when shift-refreshing on Chrome.

This means it's definitely something to do with calculation of the height of images before they are loaded.

An interesting behavior is that as soon as I right-click > Inspect the image and change anything about the CSS (not just height, but even something stupid like padding), the images are the right height again!

The height: auto fix worked for me.

[ali-hellani]

i am facing the same issue here (only when using adaptiveheight: true)
height: auto did not work for me.

[ObscureLink]

Writing just to confirm that the height: auto approach worked like a charm for me, thanks!

[strikeout]

same here, height: auto seems to work

[ObscureLink]

I still had the problem and actually had to apply the property to the image instead.

[castledoor]

i tried every single thing above, nothing worked except adding the property height: auto to the images themselves as well

[vinlim]

Issues still persist. Looking forward for solution to this deal-breaker bug for else a superb library.

[kenwheeler]

Can you guys reproduce this in a JSFiddle?

[vinlim]

@kenwheeler It's inconsistent hence unable to replicate in JSFiddle. You can however checkout this site
http://dev.showdc.co.th/news/2015

It has slickjs all over it, sometimes, some of the slides just refuse to come in full size. While i'm not able to investigate the issue, it seems to me like it was initiated before the images were loaded, or something along that line.

Thanks for the great stuff btw.

Edit: Usually a refresh may or may not resolve the issue.

[vinlim]

I uses
$(window).load() seems to resolve the issue. Just not as elegant, as it only init slick after all images are loaded.

[ghost]

I've got this exact issue on a test site: http://test.wildearth.tv/archive/petes-pond-cam - it's a grid with up to 60*24 images - I definitely need the lazyLoad.

@kenwheeler as good as a jsFiddle?

[sidnz]

It's inconsistent to reproduce as it's tied with the images being cached. The way I can constantly reproduce this is by opening the carousel in incognito every time. Using @Modified's fiddle http://jsfiddle.net/decode/wzqtwgb1/ in incognito should replicate the issue.

The height:auto fix by @tokant does solve the issue luckily - Thanks.

[siestetix]

I don't know if it's the same for other people, but in my case the div with classes .slick-list .draggable is assigned a style height: 1px

<div aria-live="polite" class="slick-list draggable" tabindex="0" style="height: 1px;">

[MrBrightside29]

Same problem here.

[voiceoffriends]

All, the below workaround might not fix the problem in first place but it's the best solution and worked immediately. Thanks Ken for the advice!

Just some background: I got the height issue only after loading new slides with imgs via ajax. The initial page loaded perfectly and slides had perfect height.

The reason why the problem only occurs sporadic is that it depends on the loading time of the image. If the image is loaded fast then the height is adapted without problems. Just if the loading is too slow then slick seems to calculate the height based on whats available... 0 or 1px. I tried all kind of height settings of auto or 100% in each img, div or css without sufficient permanent fix.

The solution is to wait till the images are loaded and then set the slick position.

                    ajaxProcessing = true; //Prevent multipe request
                    $.ajax({
                        url: '/ajax.function.php',
                        type:'POST',
                        data: 'action=infinite_scroll&page_no=1&ft=2', 
                        success: function(html){
                            ajaxProcessing = false; //Reset
                            $('#loadingDivAjax').hide();
                            $('#SharesContainer').append(html); 
                            $('.slide-item').slick({adaptiveHeight: true}); /* Initialize the slick again */
                            $('.slide-item').imagesLoaded( function() {
                                  // images have loaded
                                  $('.slide-item').slick('setPosition');
                            });
                        },
                        error: function(html){
                            ajaxProcessing = false; //Reset
                            $('#loadingDivAjax').hide();
                        }
                    });

I hope that helps somebody.

[ins429]

Seems like this is due to slick is initialized before the image is loaded.
Doing such worked for me:

  // load slick on image onLoad(`load() for jQuery`)
  $('img.your-image').load(() => {
     $('.slick').slick();
  });

[Meena07]

"I have the same issue with height: 10px. It's working intermittently. I have tried the solution given by "voiceoffriends" and "ins429 ". I didn't work out for me.

Any suggestion please?

[simeydotme]

I've looked at some of the fiddles in this thread, and @voblaunsane's is using flexbox and background-images and % heights... so clearly it will always be broken; set a height, or add some content to your slides.

@Modified / @sidnz can be fixed with http://jsfiddle.net/wzqtwgb1/5/ , lazyloading and/or putting images inside containers http://jsfiddle.net/wzqtwgb1/7/

@kevnk fiddle can be fixed with wrapping images in divs, too
http://jsfiddle.net/y3ns3kff/7/

Basically either set your .slick-slide { height: auto; } or wrap the images in a div

[joshuagatcke]

Fixed this by adding: .slick-list{height:auto !important;} to the stylesheet. When loading content with ajax.

[garygreen]

I'm still experiencing this problem. height: auto doesn't work for me.

I think the problem is because slick struggles to work out the height of the slick track because the images aren't loaded. What's weird is that slick doesn't automatically refresh when they are loaded. I think lazy loading the images would help.

Anyway to fix I've done this, which works pretty well. It triggers a resize on the window once page is loaded, which slick will listen for and resize all the loaded slick sliders.

$(window).on('load', function() {
    $(window).trigger('resize');
});

[fabiosangregorio]

Has anyone found a solution for this?

[fomenyesu]

.slick-slide { height: auto; } will help !
@fabiosang

[AJgarden]

Put an empty <div> tag out of real content would solve this problem.
That's because .slick-slide will add to the first sublayer of target element, and .slick-slide will be added style="position:relative" by script and have beyond style in slick.css:

.slick-slide {
  height: 100%;
  min-height: 1px;
}

So, if you had modified the style of your real content in carousel, these styles might influence each other, or images load incompletely and then make errors.
According to the demo, the code must be

<div class="your-class">
  <div>your real content</div>
  <div>your real content</div>
  <div>your real content</div>
</div>

and do the carousel to .your-class.

[G-mel]

For me, simply doing
```
img {
height: auto;
}

did not work, when I would create multiple slick image carousels. I solved it by doing

img {
width: 100%;
height: auto;
}
```

[hellboy81]

Put an empty

tag out of real content would solve this problem.
can solve problem with a height of 1px but some image elements are displayed wrong

Basically either set your .slick-slide { height: auto; }
cannot help

[hellboy81]

The last works for me

[Varin6]

If your slides are not images but divs with background images, make sure to set BOTH height and min-height on those divs.

[inodna]

If you are using adaptiveHeight: true and lazyLoad, then target _.slick-list_ using devtools on a page refresh(disable cache for better results). If they height of _.slick-list_ is set to 1px, you can override it using CSS for example, setting it to: _.slick-list { height: auto !important; }_. Then try if it works properly. Notice, resizing the window will calculate the height of the element properly. The issue is just on the init. Hope it helps.

[stevenchu]

I'm using slick slider with infinite scroll, and what solved the slick-track { height: 1px } issue for me was to set slick-list to height: auto !important (overriding height: 100% default).

Sliders called via Infinite scroll (endless scroll) were sometimes loading at 1px height (it looked like it wasn't even loading at all until i inspected and saw they were but slick track was calculating height improperly.

Thanks for the fix everyone!

[jeffreyhshapiro]

I recently had this issue and figured it had to do with the timing of when Slick loads and when images load. If Slick is initialized before the images, I suspect thats when we see the 1px height issue. I used a JS solution- waiting for img.complete for all my images to be true, before initializing Slick. Seems to be working well.

[bienvu]

Fixed this issue by this code

   img {
      height: auto;
      width: calc(100% - 1px);
      position: relative;
      right: -1px;
  }

[hatimmakki]

what is causing this bug is: adaptiveHeight: true
Solved by adding:
.slick-list{
height: auto !important;
}
but it will disable the effect of adaptiveHeight: true

[laloptk]

In my case, the developer that set up the carousel used max-width (as a way to add separation between slides) for the individual slides and that was breaking the carousel.

[ghost]

FIX IS HERE! Guys, i've tried all of those advices. Nothing helps. But, i fixed it add by wrapping each single img in div.
Just like AJgarden says. https://github.com/kenwheeler/slick/issues/771#issuecomment-266678781

[ghost]

Thanks. I didn't expect message btw.

вт, 25 июн. 2019 г. в 17:37, canteros21 [e-mail]:

I've solved by setting :

.slick-list {
height: fit-content;
.slick-track{ height: auto!important; }
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/771?email_source=notifications&email_token=AJH4A5STIYYG7VTN3H3V3G3P4IUSPA5CNFSM4AXBZJE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYQOTKQ#issuecomment-505473450,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJH4A5WJMDZJROVBPVFHMRTP4IUSPANCNFSM4AXBZJEQ
.

[zaccety]

+1 for putting the image in a div (this worked for me for a problem I was having with image sizes using image thumbnails for slider syncing/slider navigation).