susy grid pixel rundung fehler

Question

hey dort habe ich versucht, den susy sub-pixel rundungsfehler mit dem einsatz der isolat-methode zu beheben, aber irgendwie existiert es noch in chrom .... kann nicht herausfinden, was ich eigentlich falsch mache, vielen dank für Ihre Hilfe, wirklich zu schätzen

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

Answer 1

Ich bin mir nicht sicher, wie das Demo aussehen soll, daher ist es schwer zu wissen, was das Problem ist. Hier einige Hinweise, die Ihnen helfen könnten:

1. Chrome hat immer Sub-Pixel-Rundungsprobleme auf Hintergrund-Gradienten. Das bedeutet, dass die Rasterüberlagerung Subpixelrundungsfehler aufweist, selbst wenn das tatsächliche Layout dies nicht tut. Dieses Problem ist in der Dokumentation vermerkt. Das Raster-Overlay sollte nicht als Pixel-perfekt für alle Darstellungsfeldgrößen gelten.

2. Die Isolierung korrigiert die Subpixelrundung nicht vollständig, aber sie sollte die meisten der resultierenden Probleme beheben. Isolation bedeutet, dass Sie nie mehr als ein einzelnes Pixel entfernt sind, und die Elemente werden sich nicht gegenseitig auf die nächste Linie schieben. Sie haben möglicherweise weiterhin Probleme mit einzelnen Pixeln.