Javascript CSS列仅在Safari/Mac上消失

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

现场预览可以在这里找到：-这里是我目前在小提琴中的东西：

问题？我已经在Chrome、Firefox、IE10、Safari、Opera上进行了测试——所有这些都是在Windwos8上进行的——我甚至在iPhone5上进行了测试。一切似乎都很顺利。然而，当我在Mac上的Safari上测试它时，一场灾难发生了——动画停止工作，网格/列被弄乱了。我真的不知道发生了什么，也不知道如何修复它

这是它工作时的样子：

但是，当我在Mac上的Safari上测试它时，当你将鼠标悬停在左边的网格上时，右边的网格消失或被弄乱了！i、 e:

我试图解决这个问题的一些尝试是从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>

/*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;
    }
}

---

您可以尝试添加

display:inline块

to

.grids.gridElement.zoomIn:hover>img

这似乎适用于我的代码笔示例

你能解决这个问题吗？safari版本6.1（8537.71）中没有任何问题。您可以将鼠标悬停在右侧的元素上吗？不，我不能。如果你在safari中打开这个怎么样：？@caramba刚刚试过。。。这是半工作了！网格不会消失，动画也不会播放，但它会跳到一半，再也不会回来——我正在谈论的动画。请你给我看看你做了什么好吗？非常感谢。一切都在那里。我所做的只是注释出cssit中的最后6行代码，它在任何地方都有效，但在Safari Mac上不起作用，只是不明白为什么，它在windows Safari上起作用。奇怪的是，它对我起作用了，我只有一台Mac在工作，所以我无法再次测试它