Ошибка округления пикселей сетки Суси

Question

Эй, я попытался исправить ошибку округления в субпикселях susy с помощью метода isolate, но каким-то образом она все еще существует в chrome.... не могу понять, что я на самом деле делаю неправильно, большое спасибо за вашу помощь, правда оценили

http://codepen.io/HendrikEng/pen/PzZkjX

HTML:

<div class="l-wrap-page">
  <div class="l-wrap-main">

<div class="c-block">
    <div class="c-block__item">
       <img src="http://lorempixel.com/400/200/">
    </div>
  <div class="c-block__item">
    <div class="c-block-article">
      <p>text text text texte text text
        </p>
    </div>
  </div>
 </div>
  <div class="c-block">
    <div class="c-block__item">
      <img src="http://lorempixel.com/400/200/">
    </div>
  <div class="c-block__item">
    <div class="c-block-article">
      <p>text text text texte text text
        </p>
    </div>
  </div>
 </div>

     </div> </div>

СКС:

@import "breakpoint";
@import "susy";

@mixin cf {
  &:after {
    clear: both;
    content: '';
    display: table;
    }
}

$susy:(
columns: 12,
container: 100%,
output: float,
gutters: 0,
global-box-sizing: border-box,
debug: (
image: show,
output: overlay,
color: rgba(77, 171, 252, .2),
toggle: top left,
),
);

@include border-box-sizing; 

.l-wrap-page {
    @include container;
    @include show-grid();
}
.l-wrap-main {
    @include span(12 of 12);
}

.c-block {
        @include cf;
        @include span(12);
        @include show-grid();
        &:nth-child(even) {
            background-color: lightblue;
            .c-block__item {
                @include nested(12) {
                    &:nth-child(1) {
                        @include span(isolate 3 at 9 last);
                    }
                    &:nth-child(2) {
                        @include span(isolate 3 at 3 first);
                    }
                }
            }
        }
        &:nth-child(odd) {
            background-color: pink;
            .c-block__item {
                @include nested(12) {
                    &:nth-child(1) {
                        @include span(isolate 3 at 3 first);
                    }
                    &:nth-child(2) {
                        @include span(isolate 3 at 9 last);
                    }
                }
            }
        }
        &:last-child {
            @include last;
        }
    }

Answer 1

Я не уверен, как выглядит демо, поэтому трудно понять, в чем проблема. Вот несколько заметок, которые могут помочь:

1. В Chrome всегда есть проблемы с округлением субпикселей на градиентах фона. Это означает, что Grid Overlay имеет ошибки округления субпикселей, даже если фактическая компоновка не имеет. Эта проблема отмечена в документации. Наложение сетки не должно считаться идеальным для пикселей при всех размерах окна просмотра.

2. Изоляция не устраняет субпиксельное округление полностью, но она должна решить большинство возникающих проблем. Изоляция означает, что вы никогда не будете выключены более чем на один пиксель, и элементы не будут толкать друг друга на следующую строку. У вас все еще могут быть проблемы с расстоянием между пикселями.