use target on chrome

Question

i'm trying to enable the :target on some element, and it seems to work on IE, Firefox, and even Chrome on my phone, but somehow it wont work on my Chrome Desktop. any suggestions?

HTML (deleted the irrelevant code) :

    <nav class="main-nav" id="main-nav">
        <a href="#gym">THE GYM</a>
    </nav>

<div class="page-wrap">
        <div class="content">
            <div class="gym" id="gym"></div>
        </div>
</div>

CSS:

.gym {
    z-index:3;
    position:fixed;
    height:200px;
    width:100%;
    background:#fff;
    bottom:0;
    left:0;
    box-shadow:2px 4px 4px rgba(0, 0, 0, 0.4);
    margin-bottom:-200px;
    transition: margin-bottom ease 1s;
    -webkit-transition: margin-bottom ease 1s;
    -o-transition: margin-bottom ease 1s;
    -moz-transition: margin-bottom ease 1s;

}

#gym:target {
    margin-bottom: 0;
}

By the way, when i tried to do this method with JS, with the .css function, it won't even work...the site is on boazkerengil.com

Answer 1

I don't know that anything is broken. It's just a white box that appears, correct? If so, it is working. Here is a screen recording of what happens: http://cl.ly/VWDf. I am using Chrome Mac 34.0.1847.137.