Width issue on first load or cache cleared

[erikphanson]

I have this strange issue that only happens in FF and only on first clean load or after the cache has been cleared. It works fine on Safari, Chrome and the latest IE.

jCarousel seems to not calculate the width of the containing UL on the first load but gets it right on the all the subsequent loads.

This is what FF spits out on first load ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 100px;" class="jcarousel jcarousel-view--bike-product-carousel--block jcarousel-dom-1 jcarousel-processed jcarousel-list jcarousel-list-horizontal">

And here is the next load (cache not cleared)

<ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 2740px;" class="jcarousel jcarousel-view--bike-product-carousel--block jcarousel-dom-1 jcarousel-processed jcarousel-list jcarousel-list-horizontal">

You can see the first load sets the width at 100px, which is not correct and causes the carousel to get very tall, pushing all the content down. The second load correctly sets the width at 2740.

It's part of a Drupal install, any ideas where to start tracking this down? Not sure why it doesn't do the math on the first run but it does on the second.

[jsor]

Hard to say without seeing the actual setup. I suspect, that on first load, jCarousel can't calculate correctly because the images are not loaded yet and don't span the items to their actual size. The only workaround is probably to set the width of the items via css.

[erikphanson]

You mean explicitly set the width of all the <li class="odd jcarousel-item jcarousel-item-horizontal...elements?

[jsor]

Exactly.

[erikphanson]

Thanks, I'll start there.