CSS columns are vanishing only on Safari/Mac

Question

I have been trying to create a very simple responsive grid system, aiming to be able to show images of different hights in a tiled gallery sort of thing, something like this demonstration:

enter image description here

Live preview can be found here: http://loai.directory/gallery - Here is what I currently have in a Fiddle: http://jsfiddle.net/nhHXB

The problem? I have tested it on Chrome, Firefox, IE10, Safari, Opera - all on Windwos8 - I even tested on iPhone5. Everything seems to be working fine. However, when I tested it on Safari on a Mac, a disaster happened - the animation stopped working and the grids/columns just got messed up. I really have no clue what is going on or how to fix it.

This is how it looks - when it is working:

enter image description here

But when I tested it on Safari on a Mac, when you hover over the grids on the left, the grids on the right vanish or get messed up! i.e:

enter image description here

Some of my attempts to fix the problem was to remove back-face from my css, but no hope:

-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 - Responsive:

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

could you fix the issue? there is nothing messing up in safari Version 6.1 (8537.71) http://de.tinypic.com/r/mcruw8/8 — caramba, Apr 17 '14 at 14:17
no I could not. What about if you open this in safari: http://jsfiddle.net/nhHXB/6/ ? — caramba, Apr 17 '14 at 14:57
@caramba just tried... it is semi-working now! the grids won't vanish and the animation play but it jumps away half way through and don't come back - the animation I am on about. Please can you show me what you have done? thank you! — Leo, Apr 17 '14 at 15:10
it is all there. all I did was commenting out the last 6 lines of code in css — caramba, Apr 17 '14 at 15:11
It doens't jumps and disappears with my safari version.. and no, I don't know. best use that fiddle and create one file and then start to commenting out the css line by line, you will find it! it has to be there — caramba, Apr 17 '14 at 15:28
That what I have been doing all day, but no hope :( so it works nicely on your side now? you can hover over all of them? — Leo, Apr 17 '14 at 15:33
yes but as you know, it wan't help you that it only works on my side — caramba, Apr 17 '14 at 15:39
http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela — Chris McKee, Dec 04 '14 at 16:09

score 0 · Answer 1 · answered Apr 17 '14 at 15:28

0

You could try adding display:inline-block; to .grids .gridElement.zoomIn:hover > img this seems to work on my codepen example http://codepen.io/jonwelsh/pen/evKfa/

answered Apr 17 '14 at 15:28

Jon

26
3

it works everywhere but not on Safari Mac, just don't understand why, it worked on windows safari. – Leo Apr 17 '14 at 15:48
Strange it was working for me, I only have a Mac at work so I can't test it again – Jon Apr 17 '14 at 21:32

CSS columns are vanishing only on Safari/Mac

1 Answers1