Question

我正在尝试制作快速响应的演示文稿。在大型浏览器中，它将分为两列，右侧为图像。问题是，仅使用safari，我在图像上添加了一个：hover {filter：none;}，但在safari中，“悬停区域”似乎是图像保留在第一列时的位置。 / p>

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

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。将鼠标悬停在左侧文本下方时，您可以看到：悬停效果...

欢迎任何帮助。谢谢！

（我正在使用safari 7.0.4）

Answer 1

你遇到的问题是Safari中的一个错误，我认为这个错误是一个组合。几个星期前，我在CSS列中遇到了一些问题。在您删除转换和硬件加速属性的方案中，悬停是应该的位置。所以在这一点上，我没有为你提供解决方案。我认为这是一个Safari CSS列错误，结合硬件加速和转换。

Safari多列悬停bug

1 个答案: