1px gaps and overlaps

[stempora]

Hi

I encounter a problem with isotope and bootstrap. On certain window size the images are overlapping with 1px ( from what i see when the width its xxx.5px )

Seems to be a common issue when the item width its sent in percents.

Is there any fix for it ?

Thanks a lot!

[desandro]

I'm sorry to see you're having trouble with Isotope. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[stempora]

Hi

You can check it directly in the demo from your site

http://codepen.io/desandro/pen/NqNBxy

Just resize the window and you will see at some point images will start overlapping with 1px.

[robertkyan]

Also having this problem, is this (#684) still the best solution?

[desandro]

1px overlaps and 1px gaps are a result of rounding mismatches between displayed sizes of items and their positions on screen. There's no foolproof way to resolve them.

If you prefer 1px gaps over 1px overlaps, you can size items with calc. See demo http://codepen.io/desandro/pen/NqpEbK

.grid-item {
  width: 20%;
  width: calc( 20% - 1px );
}

.grid-item--width2 {
  width: 40%;
  width: calc( 40% - 1px );
}

Closing as wontfix.

[GoodJob]

I just added fixed width:320px; in my case and everything worked just fine. I have no need to make width dynamic, so it works well 👍

[desandro]

Enough issues have opened up on this issue, so I'm opening this one back up.

I discovered that using fractional pixel values, i.e. 40.12px looks to resolve this issue. Outlayer previously rounded pixel value with setting position. In my previous experience, fractional pixel values resulted in blurry text rendering. That was years ago. Observing this demo, positioning with fractional pixel values looks good.

Outlayer v2.1.1 has been released, with a fix for using float values. Isotope will get this fix in its next release.

[ingeniumdesign]

we build a issue for this bug:

this.$element .find('.item').each(function(){
    $(this).css('height', 'auto');
    var curHeigght = $(this).outerHeight();
    $(this).css('height', Math.round(curHeight));
});

this is a example for the vertical builder.
we round the px up.

[desandro]

Isotope v3.0.6 has been released with Outlayer upgraded to v2.1.1