사지 그리드 픽셀 반올림 오류

Question

안녕하세요, 나는 거기에 격리 방법을 사용하여 오류가있는 하위 픽셀 반올림 오류를 수정하려고했지만 어떻게 든 크롬에 여전히 존재합니다 .... 내가 실제로 잘못하고있는 것을 파악할 수 없습니다. 당신의 도움을 주셔서 감사 많은, 정말 감사

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> 

하는 SCS :

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

,536,

Answer 1

데모가 어떤 모양인지 알 수 없으므로 문제가 무엇인지 알기가 어렵습니다. 다음은 몇 가지 메모입니다.

1. 크롬에는 항상 배경 그래디언트에 하위 픽셀 반올림 문제가 있습니다. 즉, 실제 레이아웃이 아닌 경우에도 Grid Overlay에 하위 픽셀 반올림 오류가 있음을 의미합니다. 이 문제는 설명서에 기록되어 있습니다. 격자 오버레이는 모든 뷰포트 크기에서 완벽한 픽셀로 신뢰할 수 없습니다.

2. 격리는 하위 픽셀 반올림을 완전히 수정하지 않지만 대부분의 결과 문제를 해결해야합니다. 격리 란 한 픽셀 이상으로 벗어날 수 없으며 항목이 서로를 다음 줄로 밀어 넣지 않음을 의미합니다. 여전히 단일 픽셀 간격 문제가있을 수 있습니다.