오버플로 문제 : '망막'표시에서 Chrome에 숨김

Google 크롬에서만 발생하는 CSS 문제가 있습니다. overflow: hidden으로 설정된 객체는 수평 중심의 컨테이너 내에서는 가장자리에서 '잘림'되고, 고해상도 디스플레이에서만 이상한 브라우저 너비 인 에서만 나타납니다.오버플로 문제 : '망막'표시에서 Chrome에 숨김

HTML :

<html><body> 
    <div id="container"> 
    <div class="sprite"> </div> 
    </div> 
</body></html>

CSS : 이상한 창에서

이제

#container 
{ 
    margin: 0 auto; 
    max-width: 800px; 
    -webkit-transform: translate3d(0px,0px,0px); 
} 

.sprite 
{ 
    width: 30px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
} 

.sprite:after 
{ 
    content: ' '; 
    overflow: hidden; 
    display: block; 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image: url("/img/[email protected]"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 

    -webkit-background-size: 30px 30px; 
    -moz-background-size: 30px 30px; 
    -o-background-size: 30px 30px; 
    background-size: 30px 30px; 
}

, 나는 윈도우의 폭의 크기를 조정으로는, 스프라이트 내 망막 디스플레이에 양쪽을 클리핑됩니다 너비. 표준 (1 css 픽셀에서 1 디스플레이 픽셀까지) 디스플레이에서는 발생하지 않습니다.

enter image description here

이 명백한 렌더링 버그 사파리 나 파이어 폭스에서 발생하지 않습니다. Chrome을 실행하는 OS X 10.9.3입니다.

편집 : 순수 CSS 서클 모양에서도 발생하므로 배경 이미지 사용과 관련이없는 것처럼 보입니다.

는

출처

2014-06-06 Ade

다음에 너비와 높이를 설정해보세요. – Pete

@Pete는 내 단순화 된 예에서이를 잊어 버렸습니다. 그것은 이미 설정되었습니다 (이미지는 이미지 없이는 보이지 않습니다) – Ade

예제가 너무 단순화되어 문제가 독립형으로 발생하지 않았습니다.

그것은 내 전체 응용 프로그램에서 SASS 믹스 인을 통해, 나는이이 CSS의 성능을 향상시킬 수 있었다 (그것을 포함하도록 편집 질문) 스프라이트가 포함 된 패널

-webkit-transform: translate3d(0px,0px,0px);

에 적용 다음했다 밝혀 하드웨어 가속 기능 (주로 iOS)을 제공합니다.

제거하면 상황이 약간 개선되므로 창 크기를 조정할 때 모양을 '자르기'가 어려워집니다.

그러나 :after 요소에서 overflow: hidden을 제거하면 완전히 해결 된 것으로 보입니다.

이 '클리핑'부작용은 순수한 CSS 서클에서도 발생합니다. 배경 이미지와 관련이 없습니다 (감사 @Rohit).

이것은 내가 잘못하고있는 것보다는 렌더링하는 버그 인 것 같습니다.

출처

2014-06-06 12:49:52 Ade

는 이봐 지금 당신은 밖으로 이미지와 함께이 시도 할 수

CSS는

#container 
{ 
    margin: 0 auto; 
} 

.sprite 
{ 
    width: 30px; 
    height: 30px; 
    position: relative; 
    text-align:center; 
    line-height:30px; 
    font-weight:bold; 
} 

.sprite:after 
{ 
    content: ' '; 
    overflow: hidden; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right:0; 
    bottom:0; 
    background:#eecc00; 
    border-radius:50%; 
    z-index:-1; 
}

HTML

<div id="container"> 
    <div class="sprite">! </div> 
    </div>

Demo

출처

2014-06-06 11:24:06

순수한 CSS 서클 (이미지 없음) – Ade

오버플로 문제 : '망막'표시에서 Chrome에 숨김

답변

관련 문제