CSS列仅在Safari / Mac上消失

Question

我一直在尝试创建一个非常简单的响应式网格系统，旨在能够在平铺的图库中显示不同高度的图像，类似于此演示：

可在此处找到实时预览：http://loai.directory/gallery - 以下是我目前在小提琴中的内容：http://jsfiddle.net/nhHXB

问题？我已经在Chrome，Firefox，IE10，Safari，Opera上测试了它 - 所有这些都在Windwos8上 - 我甚至在iPhone5上测试过。一切似乎都很好。然而，当我在Mac上的Safari上测试时，发生了一场灾难 - 动画停止工作，网格/列刚搞砸了。我真的不知道发生了什么或如何解决它。

它的外观 - 工作时间：

但是当我在Mac上的Safari上测试它时，当你将鼠标悬停在左边的网格上时，右边的网格消失或搞砸了！即：

我解决这个问题的一些尝试是从我的CSS中删除背面，但没有希望：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;

HTML：

<div class="grids columns2">
    <div class="gridElement animate zoomIn brightFrame">
        <img alt="image" src="assets/images/image.jpg">
        <div>   <span class="background"></span>
    <span class="icon-magnifier1"></span>

            <p>Short Description</p>
        </div>  <a href=""></a>

    </div>
    <div class="gridElement animate zoomIn brightFrame">
        <img alt="image" src="assets/images/image.jpg">
        <div>   <span class="background"></span>
    <span class="icon-magnifier1"></span>

            <p>Short Description</p>
        </div>  <a href=""></a>

    </div>
    <div class="gridElement animate zoomIn brightFrame">
        <img alt="image" src="assets/images/image.jpg">
        <div>   <span class="background"></span>
    <span class="icon-magnifier1"></span>

            <p>Short Description</p>
        </div>  <a href=""></a>

    </div>
    <div class="gridElement animate zoomIn brightFrame">
        <img alt="image" src="assets/images/image.jpg">
        <div>   <span class="background"></span>
    <span class="icon-magnifier1"></span>

            <p>Short Description</p>
        </div>  <a href=""></a>

    </div>
</div>

CSS：

/*Grids System*/
 .grids {
    width: 100%;
    overflow: hidden;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}
.grids.columns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
.grids.columns4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.grids .gridElement {
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.grids .gridElement:last-child {
    margin-bottom: 0;
}
.grids .gridElement img {
    min-width: 100%;
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    transition: all .9s ease;
}
/*Grids System > Animated Sections (.animate)*/
 .grids .gridElement.animate div {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 20%;
    overflow: hidden;
    text-align: center;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
}
.grids .gridElement.animate div span.background {
    background-color: #5A5FB4;
    filter: alpha(opacity=70);
    opacity: 0.70;
}
.grids .gridElement.animate:hover > div {
    filter: alpha(opacity=1);
    opacity: 1;
}
.grids .gridElement.animate div span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 20%;
    font-size: 2em;
}
.grids .gridElement.animate a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.grids .gridElement.animate div a * {
    cursor: pointer;
}
.grids .gridElement.animate div p {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 15px 15px 0;
}
/*Grids System > Animated Sections > ZoomIn Animation*/
 .grids .gridElement.zoomIn:hover > img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
}

CSS - 响应：

@media screen and (max-width: 770px) {

   /*GENERAL STYLINGS ==========================================================*/
   /*Grids System*/
    .grids, .grids.columns4, .grids.columns2 {
        -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
    }

        /*Grids System > Animated Sections (.animate)*/
        .grids .gridElement.animate div {
            position: relative; 
            padding: 0;
            margin-top: 1px;
            filter: alpha(opacity=1) !important;
            opacity: 1 !important;
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;
        }

            .grids .gridElement.animate div span.background {
                display: inline-block;
                filter: alpha(opacity=1);
                opacity: 1;
            }

            .grids .gridElement.animate div span {
                display: none;
            }

            .grids .gridElement.animate div p {
                position: relative; 
                padding: 15px 10px;
            }

            /*Grids System > Animated Sections > ZoomIn Animation*/
            .grids .gridElement.zoomIn:hover > img {
                transform: none;
                -ms-transform: none;
                -moz-transform: none;
                -webkit-transform: none;
                -o-transform: none;
            }
}

@media screen and (max-width: 500px) {

   /*GENERAL STYLINGS ===========================================================*/
   /*Grids System*/
    .grids, .grids.columns4, .grids.columns2 {
        -webkit-column-count: 1;
       -moz-column-count: 1;
       column-count: 1;
    }
}

Answer 1

您可以尝试将display:inline-block;添加到.grids .gridElement.zoomIn:hover > img这似乎适用于我的代码集示例http://codepen.io/jonwelsh/pen/evKfa/