Incorrect positioning when using column-count CSS property on parent

mflorence99 commented 9 years ago

What a sweet piece of code!

I'm showing a bunch of image thumbnails, organized into columns by applying a column-count CSS property to the parent. But when I apply the spinner, it only shows on the thumbnails in the leftmost column. I'm testing in Chrome 37. Could it be Google's problem in calculating the actual element position for DOM elements it has wrapped into another column?

      <main class="thumbnails">
        <section class="thumbnail" ng-repeat="product in products"
            ng-click="showProduct(product, $event)">
          <img ng-src="{{ product.thumbnail }}">
        </section>
      </main>

$scope.showProduct = function(product, $event) {
      var tgt = $event.currentTarget;
      var opts = { color: "#FFFFFF", shadow: true };
      new Spinner(opts).spin(tgt);
}

/* just using less and lesshat mixins */
.thumbnails {
    .column-count(4);
    .column-gap(0);
    .column-width(auto);
    .thumbnail {
      position: relative;
    }
  }

deizel commented 9 years ago

Just ran into this issue too (Chrome, not Firefox) but found some leads:

Fiddle: http://jsfiddle.net/fgx3jyjh/2/ (see CSS comments)

mflorence99 commented 9 years ago

Brilliant Chris -- thank you so much!

On Sat, Oct 18, 2014 at 12:15 AM, Chris Burke notifications@github.com wrote:

Just ran into this issue too (Chrome, not Firefox) but found a fix here: chinchang/hint.css#60 (comment) https://github.com/chinchang/hint.css/issues/60#issuecomment-31032152

Demo: http://jsfiddle.net/fgx3jyjh/1/ (Remove the /* fix chrome */ line from CSS to see the problem)

— Reply to this email directly or view it on GitHub https://github.com/fgnass/spin.js/issues/252#issuecomment-59598476.

TimothyGu commented 9 years ago

-webkit-transform: translate3d(0, 0, 0) is enabled by the hwaccel option, which has many other bugs and thus disabled by default: #41, #47.

RamaMuthukrishnan commented 9 years ago

This is very helpful for me. i faced some problem to set the icon in the column split list .For example I mouse over the icon in one list then next list is selected.this problem only reproduced in chrome.Thanks
deizel

fgnass / spin.js

Incorrect positioning when using column-count CSS property on parent #252