는 : 웹킷

Question

이미지가 다중 열 레이아웃에 공중 선회와 나는 버그에 직면하고있어

에 CSS를 다중 열 레이아웃 내에서 상태 요소를 가져 : http://codepen.io/kompuser/pen/CIwFo

이 codepen에를, 나는 간단한을 설정 한 :의 속성을 가져가 각 img는 figure 요소에 포함됩니다.

레이아웃은 가로로 스크롤되도록 설정된 여러 열로 구성된 div입니다.

기본적으로 스크롤되지 않으면, hovered img는 올바른 방식으로 작동합니다.

버그는 컨테이너 div가 (심지어 약간) 스크롤 될 때 발생합니다. 그런 다음, img 또는 figure 요소가 제대로 작동하지 않아 오프셋/글리치가 생성 된 것을 볼 수 있습니다. OS X의에서 Windows, 사파리 7.0.6에

이를

가 크롬 (38)에 확인 (윈도우 7, OS X 10.9), 사파리 5.1.7은 확실히이다

.entry-content{ 
    display:block; 
    -moz-column-width:  240px; 
    -webkit-column-width: 240px; 
    -ms-column-width:  240px; 
    column-width:   240px; 

    -moz-column-gap:  1em; 
    column-gap:    1em; 
    -ms-column-gap:   1em; 
    -webkit-column-gap:  1em; 

    overflow-y:    hidden; 
    overflow-x:    auto; 
    height:     480px; 
    font-size:    16px; 
    line-height:   19px; 
    margin: 1em; 
    padding: 1em; 
    -webkit-overflow-scrolling: touch; 
    clear:both; 
    position:relative; 
} 


.entry-content figure { 
    max-width:100%; 
} 

.entry-content figure:hover img { 
    opacity:.5; 
} 

Answer 1

버그, 일이 나타납니다 열과 스크롤이있는 블록이있을 때. 해결책은 다른 블록에 그 특성을 분할하는 것 때문에 래퍼 스크롤링가되며, 이너 블록은 열을 가질 것이다 : http://codepen.io/kizu/pen/saItm

.entry-wrapper { 
    overflow-y: hidden; 
    overflow-x: auto; 
} 

(열 블록에서 해당 스타일을 제거와 코스) 및

<div class="entry-wrapper"> 
    <div class="entry-content"> 
    … 
    </div> 
</div> 

버그가 다시 나타나지 않아야합니다.