search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Extra Div's Occasionally Generated #136

Closed zacharybrady closed 9 years ago

zacharybrady commented 9 years ago

NOTE: Could not reproduce in a reduced test case. Leaving this here though just in case this fringe case can shed light on any other issues. screen shot 2015-05-11 at 10 01 56 am screen shot 2015-05-11 at 10 02 10 am As demonstrated in the screenshots, the .flickity-viewport and .flickity-slider container are occasionally generated twice. Which has the unfortunate result of causing this to happen to the slider: screen shot 2015-05-11 at 10 07 08 am

I don't have too many details yet other than:

I'm going to set up a reduced test case and also keep testing in the environment it was caught in. Will update as findings come in.

UPDATES

  1. Markup has no/little impact.Changed the list elements to div's and produces same results.
  2. After checking a few computers and browsers I only found this issue to appear on a single computer (2013 Mac Pro) and only on the latest stable version of Chrome.
desandro commented 9 years ago

Thanks for reporting this issue. Could you provide any more context: How are you loading JS? Are you using a framework?

zacharybrady commented 9 years ago

I'm using Filament Group's LoadJS ( https://github.com/filamentgroup/loadJS ). The site is live here http://www.nationwidecoils.com/ if that helps.

cjeria commented 9 years ago

I'm having a similar issue. I'm loading the js file in the head of my site.

image

desandro commented 9 years ago

If you can provide a reduced test case, I'd love to take a look.

Most likely, Flickity is initialized multiple times on the same element.

cjeria commented 9 years ago

I wasn't able to replicate the problem in my reduced test case, which works as expected. It only seems to be happening in my dev environment. I'm using a static site generator Middlemanapp https://github.com/middleman/middleman

Here's my site https://github.com/cjeria/visualty/tree/flickity-rtc, I'll add you as a collaborator. Thx!

cjeria commented 9 years ago

Solved this issue. If I understand this correctly, the JS was being loaded twice, once from the node_modules directory (I used npm install flickity) and another from the head of my template. I simply deleted the one from the head and it works at it should. The CSS file however, needs to be called out in the head. Would be nice if it would load the same way as the JS file does with node_modules. Not sure how to configure that.

desandro commented 9 years ago

Closing this issue as its been quiet :ghost: