CODEWITHSUNDEEP
htmlcsssafari
user481610
user481610

Reputation: 3270

Safari not running css display:none property

I have the following html:

<div id="loadinganimationsearch">
    <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div>   
    <div id="block_1" class="barlittle"></div>
    <div id="block_2" class="barlittle"></div>
    <div id="block_3" class="barlittle"></div>
    <div id="block_4" class="barlittle"></div>
    <div id="block_5" class="barlittle"></div>
    <br>
</div>

This is what the HTML produces:

enter image description here

Now I have the following CSS, that as the browser runs the loadinganimationsearchhas no display in chrome and firefox. 

 #loadinganimationsearch {
     display: none;
}

But now when I run it in Safari 5.1.7, it seems to almost ignore the CSS for some reason. Why is this happening and how can I fix it?

Upvotes: 1

Views: 7009

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

After searching around, I found the culprit:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }; /* This semicolon shouldn't be here */
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }; /* This semicolon shouldn't be here */
}

There shouldn't be semicolons after the animation keyframe percentages. It should be:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }
}

I presume that after Safari parses the semicolons, none of the following CSS takes effect.

Upvotes: 2

Related Questions