css - Safari 多列悬停错误

Question

我正在尝试进行响应式演示。在大型浏览器中，它会被分成两列，右边是一张图片。问题是，仅使用 safari，我使用 :hover{filter: none;} 在图像上添加了过滤器，但在 safari 中，“悬停区域”似乎是图像停留在第一列时的位置。

不确定我是否清楚，所以这里有一个显示错误的简化代码。

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%;
}

这是一个 JSFiddle .将鼠标悬停在左侧文本下方时，您可以看到 :hover 效果...

欢迎任何帮助。谢谢!

(我正在使用 safari 7.0.4)

Answer 1

您面临的问题是 Safari 中的错误，我认为该错误是多种因素的结合。几周前，我在不同的场景中遇到了 CSS 列的一些问题。在您删除过渡和硬件加速属性的情况下，悬停就在它应该在的位置。所以在这一点上我没有适合你的解决方案。我认为这是与硬件加速和转换相结合的 Safari CSS 列错误。