search

marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Element reinitialization after cloning element #252

Open Nincha opened 5 years ago

Nincha commented 5 years ago

Hi!

First off, thanks for this huge work! It's clearly the future of CSS. :)

I've been using the plugin in many situations, and encountered some issues when recreating/moving elements with jQuery. A lot of them have been solved but one - yet which is not really blocking the navigation because its use in that case is supposed to add minor improvments in the case - is still giving me trouble. x)

Some carousel plugins like http://kenwheeler.github.io/slick/ have an "infinite" option which creates a loop for left/right navigation. I've tried a lot of options, but it seems (not sure about that but it's the only idea I've got left in mind) that when the script both clones and moves (in DOM) an element, the script has trouble reloading.

There's my example here in case it can help : https://www.vs-league.com/app/season/players/14 ; you can see that when you drag the window to desktop size multiple times, you may have differents font sizes in the carousel.

I've been trying things like that: 

  $('.sesasonPrizesCarousel').on('reInit', function(slick, currentSlide){
      ElementQueries.init();
  });

  $('.sesasonPrizesCarousel').on('afterChange', function(slick, currentSlide){
      ElementQueries.init();
  });

Do you have information about that type of case?

Cheers, Charlie

marcj commented 4 years ago

Interesting. Things to find out: How does the library clone the elements and what implication does this have to the ResizeSensor. I assume the ResizeSensors is cloned as well but it's callbacks are empty, thus stays uninitialized or simply uses cloned callbacks for the wrong element. One idea is to check here additionally for || element.resizedAttached.length() == 0 https://github.com/marcj/css-element-queries/blob/master/src/ElementQueries.js#L174 another idea would be to check here for || element.elementQueriesSetupInformation.element != element) https://github.com/marcj/css-element-queries/blob/master/src/ElementQueries.js#L170