Slick: width: 0px on firefox only

[Baccanno]

Hi,
First of all thank you for this plugin. It works perfectly well on IE 11 / Chrome / Opera.

However on Firefox the width of .slick-track and .slick-slides is very small ( 0px, 1px, 13px ) and no images is displayed. I saw some related issue but none with the solution

you can look at it on www.synchromthegame.com (sorry for the unintended publicity)

Here is my init code

        $(".synchrom-screens").slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          centerPadding: "20%",
          dots: false,
          centerMode: true,
          focusOnSelect: true,
          prevArrow: "<div class='prevArrowScreen'><div class='arrow--inner'>&#9664;</div></div>",
          nextArrow: "<div class='nextArrowScreen'><div class='arrow--inner'>&#9654;</div></div>"
        });

slick 1.5.3

[simeydotme]

looks fine to me :smiley: (Firefox 33.1.1, 36.0.1, 37.0.2)
http://jsfiddle.net/jhcj4hd1/

[simeydotme]

Since I'm a lovely fellow and don't have the heart to just leave you hanging; :laughing:
type this in to your browser-console:

$(".lightbar").remove();
$(".slick-slider").slick("refresh");

:smile: - _works now!_

I don't know why, but Firefox doesn't like your <div class="lightbar col-xs-12 col-lg-offset-1 col-lg-10"> </div> :confused:

Good luck,
Simon.

[Baccanno]

It looks fine to you on the fiddle or on the website ?

It works for me in the fiddle with '37.0.2' but the website still doesn't show the slides

[Baccanno]

... mmh lol thanks :)
That's IT after all ...

If I hide them dat also work. Will investigate

[simeydotme]

:dancer: - it _could_ still be a slick issue, but you'll have to do a bit of investigation in to why those elements cause your layout problem. And if you can update the JSFiddle to demonstrate it, that'd be awesome and we can see about fixing it! :) -- however there _are_ some cases where the plugin will just _not_ work due to limits in CSS/JS/Browsers :cry:

Si

[goodpixels]

i have a similar, although maybe unrelated issue. basically im using slick on an element thats inside a backbone view. $.slick() is called as soon as view finishes rendering. this works fine, but only the first time. whenever you re-render the view (say for example, you go to the next screen of the app, then navigate back to the one with carousel) the carousel does not load properly. it gets initiated and all the HTML structure is created, but with incorrect slide widths - width: 0px - which breaks the layout.

now, before anyone points out that i am trying to intialize Slick on a dynamically injected element, i want to assure you that i have checked that already. i am able to _get_ the element in question as a jQuery object and style it with CSS for example. i have also checked to make sure that i am not trying to initialize Slick twice on the same element and that i'm not removing any instances of it carelessly.

so to sum up, here's what's happening:

i have a mobile app with two screens - home and login screen. home is the view one with the carousel, login is a separate view. when i land on the page for the first time and Backbone starts routing, it takes me to /#home and renders the view - carousel is displaying just fine. then, when i navigate from that view to the next one (login screen), the home view is being destroyed and in it's place i render the login screen. and here's the issue: if i try to go back using the back button, or even by going to the previous URL by typing the hash manually (ie. going from /#login to /#home), the carousel gets loaded but all the widths are set to 0.

here's what my view looks like:

// Carousel

var carouselView = Backbone.View.extend( {

    template: 'partials/carousel',

    // jQuery selectors

    selectors: {

        carousel: '#carousel',

    },

    afterRender: function() {

        this.$get( this.selectors.carousel ).slick( {

            arrows: false,
            infinite: false

        } );

    }

} );

and here's the carousel template:

<div id="carousel">

    <figure>

        <img src="assets/img/blank-carousel.png" height="400" width="320" />

        <figcaption>

            <h3>Step 1:<br />Enter&nbsp;your details.</h3>

        </figcaption>

    </figure>

    <figure>

        <img src="assets/img/blank-carousel.png" height="400" width="320" />

        <figcaption>

            <h3>Step 2:<br />Choose&nbsp;your photo.</h3>

        </figcaption>

    </figure>

    <figure>

        <img src="assets/img/blank-carousel.png" height="400" width="320" />

        <figcaption>

            <h3>Step 3:<br />Add&nbsp;your text.</h3>

        </figcaption>

    </figure>

    <figure>

        <img src="assets/img/blank-carousel.png" height="400" width="320" />

        <figcaption>

            <h3>Step 4:<br />Share&nbsp;with your&nbsp;friends.</h3>

        </figcaption>

    </figure>

</div><!-- end div#carousel -->

any ideas?

FYI, calling this.$get( this.selectors.carousel ).slick( 'refresh' ); after initial call to $.slick() seems to fix the issue, but causes an unpleasant flash of unstyled content.

FYI 2, i swapped Slick for Owl Carousel temporarily and everything works fine - which tells me that there's an issue with Slick itself rather than my code.

BTW this happens in all browsers.

[simeydotme]

@goodpixels , thanks for the contribution :) - really there's nothing I can think of without seeing some code... if you would like some help to resolve it, go ahead and fork this JSFiddle and try to get a very simple version of your problem running (with backbone) :smiley:

[goodpixels]

here's a codepen: http://codepen.io/anon/pen/doGWPB/left/?editors=001

[goodpixels]

this looks like a possible answer: https://github.com/kenwheeler/slick/issues/235

yet it still sucks! i've solved it temporarily by doing this:

// Carousel

var carouselView = Backbone.View.extend( {

    template: 'partials/carousel',

    // jQuery selectors

    selectors: {

        carousel: '#carousel',

    },

    afterRender: function() {

        var _this = this;

        // Argh! This is SO hacky, bleh!

        setTimeout( function() {

            _this.$get( _this.selectors.carousel ).slick( {

                arrows: false,
                infinite: true,

            } );

        }, 1 );

    }

} );

...but I hate it! 1 ms!!!

[simeydotme]

it really works with 1ms ? - does backbone do any requestAnimationFrame DOM-update caching to maintain 60fps? ... I know some libraries will try to catch all dom-manipulation and store them for the next animation frame... that would perhaps explain why it cannot calc widths until 1ms later.

Sorry to say it's just a limitation of the technology...
http://codepen.io/simeydotme/pen/LVGgNv
You can see; there's just no widths/dimensions for Slick to be able to calculate on...

Not a slick issue, but please keep us posted with any updates as I know many people suffer this kind of thing! :bow:

[simeydotme]

if might be better, to wrap your event-trigger in the timeout, instead? :)

[goodpixels]

nah, i got some other stuff which relies on that event, and i am quite happy with the fact that it triggers so early after render :)))

anyway, yeah, that 1ms delay does the trick. considering this example, i think it would make sense to introduce another option to Slick, which would force width & height upon initialization. how does that sound?

[simeydotme]

You mean like:

$(el).slick({ width: 320,  height: 100 });

:question: :thought_balloon:

[goodpixels]

yes. and i think they should accept either an integer or a function for maximum flexibility.

[simeydotme]

heh... I see the reasoning :smiley: , but still the irony of a responsive carousel having fixed-width as an option smacks me hard in the face. :laughing: :stuck_out_tongue_closed_eyes: - that's a pretty heavy amount of work that I'm not keen to take on, @kenwheeler would need to consider this. :monkey:

[morenasanta]

Hi @Baccanno
To fix that issue for firefox browser you need to specify with and heigh:auto for slick-list element.
Hope it helps

[morenasanta]

with: 100%