: hover state element inside CSS multi-column layout on Webkit
I ran into an error with images stuck in multi-column layout: http://codepen.io/kompuser/pen/CIwFo
In this code, I have set a simple: hover property for each img contained in a shape element.
A layout is a multi-column set of divs that will scroll horizontally.
Basically, when not scrolling at all, the img hangs behave correctly.
The error occurs when the container div (even slightly) scrolls. Then any img element or shape freezes, behaves incorrectly and we see an offset / crash being generated.
This is confirmed in 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;
}
source to share
This is for sure a bug, it seems to happen when there is a block with columns and scrolling. A workaround would be to split these properties into different blocks so that the shell has scrolling and the inner block has columns: http://codepen.io/kizu/pen/saItm
.entry-wrapper {
overflow-y: hidden;
overflow-x: auto;
}
(by removing those styles from the column block, of course) and then
<div class="entry-wrapper">
<div class="entry-content">
…
</div>
</div>
It should be enough to prevent the error from appearing again.
source to share