susy grid pixel rounding error

hey there i tried to fix the susy sub-pixel rounding error with the use of the isolate method, but somehow it still exists in chrome....cant figure out what i am actually doing wrong, thanks a lot for your help, really appreciated

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>

scss:

@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;
        }
    }

I'm not sure what the demo is meant to look like, so it's hard to know what the problem is. Here are a few notes that might help:

1. Chrome always has sub-pixel rounding problems on background-gradients. That means the Grid Overlay has sub-pixel rounding errors, even if the actual layout does not. That issue is noted in the documentation. The grid overlay should not be trusted as pixel-perfect at all viewport sizes.

2. Isolation doesn't fix sub-pixel rounding entirely, but it should fix most of the resulting issues. Isolation means you will never be off by more than a single pixel, and items won't push each other onto the next line. You may still have single-pixel spacing issues.