.flickity-viewport height is incorrect.

[sheriffderek]

In a current project, the `.flickity-viewport' isn't getting the correct height assigned to it. In Chrome this happens about 1/20 times --- FF 1/2 the time, and in Safari, it happens every time.

I am doing some floating and some other stuff - but clear-fixing everything, and I think my problem is more about the order of something firing. I have flickity compiling down with other files, but have also tried it in the header and footer.

If you resize, the height of the cell contents are read, and things are as they should be.

Any ideas?

I stripped my code down to the bare minimum, and instead of initializing in the HTML, I did so in the jQuery - but still no luck.

Here is a simpllified example. http://s.codepen.io/sheriffderek/debug/e6fd358b64e1b3b9ca1444884ac0e48a?

If you command > shift > r --- a bunch of times, you''ll see the whacky results.

This is my temporary fix, but pretty blinky.

$(window).load( function() {
  var artHeight = $('.key-art').outerHeight();
  $('.flickity-viewport').css({
    'height' : artHeight
  });
  $('.flickity-viewport').animate({ // quick and dirty
    'opacity': 1
  });
});

[desandro]

Most likely this issue is being caused by unloaded images. Try imagesLoaded: true and seeing if this resolves it.

[sheriffderek]

That did the trick. Thanks David.

http://s.codepen.io/sheriffderek/debug/e6fd358b64e1b3b9ca1444884ac0e48a

[needfulthing]

As this is a consistent problem in Safari, shouldn't imagesLoaded be true by default?

[fschroiff]

@needfulthing not every slide contains images.

[needfulthing]

Unfortunately I still get a too big height set on the .flickity-viewport div in Firefox every now and then, even if imagesLoaded is set to true. This happens mostly when flickity is on the first page loaded after FF has been opened. I used different FF versions in clean browserstack.com-VMs to test and to exclude any add-on problem. As I wasn’t able to find any onLoad callback in flickity, the only way to correct this was to call reloadCells with a certain setTimeout or on the first cellSelect event (edit: when imagesLoaded is true, which triggers the cellSelect for every slide on load).

[okta2510]

its working thanks

[mbarwick83]

I'm getting this problem too, without using images. I have all floats cleared and even tried imagesLoaded: true, maybe thinking FA icons we're the problem. In Safari, 9 times out 10, the result is the first image attached (when it should really be the last image). If I open Safari dev tools, it automatically corrects itself. Weird....

This should be re-opened.

[justb3a]

Got the same problem in Safari. Slider without images.

I'm quite sure it has something to do with custom fonts. If I add font-family: Arial; or something else standardised, it works as expected. If I use the custom font the customer wants, the height is much higher than expected. If I change the width of the browser, it rescales correctly.

custom font

standardised font just added: .slider { font-family: Arial; }

[joehae]

@justb3a I was able to fix the height-issue with custom fonts using this: https://github.com/bramstein/fontfaceobserver

It basically just tells you when your font is available, so you can (re)initialize flickity 🤷‍♂

[srikat]

In my case the issue was fixed by adding adaptiveHeight: true.