：在Webkit上的css多列布局中悬停状态元素(:hover state element within css multi-column layout on Webkit)

 我正面临着一个多列布局中悬停图像的错误： http ： //codepen.io/kompuser/pen/CIwFo 
 
 在这个codepen中，我为一个figure元素中包含的每个img设置了一个简单的：hover属性。 
 
 布局是一个多列的div设置为水平滚动。 
 
 基本上，当没有滚动时，悬停的img表现正确。 
 
 容器div（甚至略微）滚动时会发生错误。 然后，任何img或figure元素悬停都表现不正确，我们可以看到创建了一个偏移/故障。 
 
 这在Chrome 38（Windows 7，OS X 10.9），Windows上的Safari 5.1.7，OS X上的Safari 7.0.6中得到了确认。 
 
.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;
}

I'm facing a bug with images hovered in a multi-column layout : http://codepen.io/kompuser/pen/CIwFo
 
On this codepen, I've set a simple :hover property for each img contained in a figure element.
 
The layout is a multi-columned div set to be horizontally scrolled.
 
Basically, when not scrolled at all, the hovered img behave the right way. 
 
The bug happens when the container div is (even slightly) scrolled. Then, any img or figure element hovered behaves incorrectly and we can see there is an offset/glitch created.
 
This is confirmed on Chrome 38 (Windows 7, OS X 10.9), Safari 5.1.7 on Windows, Safari 7.0.6 on OS X.
 
.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;
}

原文：https://stackoverflow.com/questions/26215871