Safari multiple column hover bug

Question

I'm trying to make a responsive presentation. And in a large browser it would be separated in two column, with an image on the right one. The problem is, with safari only, that I added filters on the image with a :hover{filter: none;} but in safari the "hovering zone" seems to be where the image would be if it stayed on the first column.

Not sure if I'm much clear, so here's a simplified code showing the bug.

HTML:

<div class="cbp-contentslider">
  <div class="cbp-content">
    <p>
    <h2>Salon de l'auto 14'</h2>
    <h3>Journée presse, photos des premières, et c&aelig;tera.</h3>
    </p>
    <p><img class="elimg" src="http://cdn3.salon-auto.ch/media/salonauto/image/0/big_764_509/asset-version-80e13841e1-ford_mustang_04.jpg"/></p>
  </div>
</div>

CSS:

 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cbp-contentslider .cbp-content {
    -moz-column-rule: 1px dashed #cbcbcb;
    column-rule: 1px dashed #cbcbcb;
    -webkit-column-rule: 1px dashed #cbcbcb;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 0.5em;
    -o-column-gap: 0.5em;
    column-gap: 0.5em;
    -webkit-column-gap: 0.5em;
    vertical-align: top;
    padding: 1em 0;
}

.cbp-contentslider p {
    color: #999999;
    padding: 0 0.5em 0.4em;
    margin: auto;
    font-size: 1em;
    font-weight: 300;
    text-align: justify;
    line-height: 1.6;
    min-width:50%;
}

.elimg {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* hardware acceleration iOS7 (full res img) */
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    /* FILTER SECTION */
    -o-filter: grayscale(1) brightness(1.3) contrast(0.65);
    /*-moz-filter: grayscale(1) brightness(1.3) contrast(0.65);*/
    /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    -ms-filter: grayscale(1) brightness(1.3) contrast(0.65);
    -webkit-filter: grayscale(1) brightness(1.3) contrast(0.65);
    filter: grayscale(1) brightness(1.3) contrast(0.65);
    /* ANIMATION */
    -webkit-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: auto;
    margin-top: 5%;
    position: relative;
}

.elimg:hover {
    -o-filter: grayscale(0) brightness(1) contrast(1);
    /*-moz-filter: grayscale(0) brightness(1) contrast(1);*/
    -ms-filter: grayscale(0) brightness(1) contrast(1);
    -webkit-filter: grayscale(0) brightness(1) contrast(1);
    filter: none;
    width: 100%;
}

.elimg:active {
    -o-filter: grayscale(0) brightness(1) contrast(1);
    /*-moz-filter: grayscale(0) brightness(1) contrast(1);*/
    -ms-filter: grayscale(0) brightness(1) contrast(1);
    -webkit-filter: grayscale(0) brightness(1) contrast(1);
    filter: none;
    width: 100%;
}

And here's a JSFiddle. You can see the :hover effect when hovering below the left text...

Any help would be welcome. Thanks!

(I'm using safari 7.0.4 )

LosBeekos LosBeekos · Accepted Answer · 2014-06-26T12:53:29

The problem you're facing is a bug in Safari, i think the bug is a combination of things. I've had some problems with CSS columns a few weeks back with a different scenario. In your scenario when you delete the transition and hardware acceleration properties the hover is where it should be. So at this point I don't have a solution for you. I think it is a Safari CSS columns bug in combination with the hardware acceleration and transition.

Safari multiple column hover bug

1 Answers