Всем привет, сегодня натолкнулась на интересный баг.

Есть квадратная сетка:

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ширина каждого элемента .item задана в процентах и различается, в зависимости от ширины экрана. У меня она определялась такой вот функцией:

.grid-cell(@n, @parent: 100%){
	@width: @parent / @n;
	height: -1px;
	width: @width;
	padding-bottom: @width;}

Здесь n — число колонок для текущей ширины.

В «Хроме» при рендеринге обнаруживалось, что для некоторой ширины экрана между колонками или между рядами появляется лишний, никем не занятый, пиксель. Возникает это из-за различного округления дробный пикселей в разных браузерах (подробнее тут и тут).

Фикс заключается в том, что для .item прописываем:

.item{
	margin-right: -1px;
	margin-bottom: -1px;}

Всё же надеюсь, что подобных проблем ни у кого больше не возникнет.