CODEWITHSUNDEEP
htmlcssfirefoxtransition
TupidaMC - DEV
TupidaMC - DEV

Reputation: 47

CSS transition doesn't work in Firefox

I tried a lot and already searched in Google but I don't find a solution for my problem:

I made a jsfiddle for you to see my source-code: Click here for my Source Code

Everything works fine. But the transition doesn't work in Firefox.

Here is my Sourcecode because I have to post it too if I want to use a jsfiddle!

<nav>
        <ul>
            <li><a href="#" class="active">Startseite</a></li>
            <li><a href="#">Projekte</a>
                <ul>
                    <li><a href="#">Java / Bukkit</a></li>
                    <li><a href="#">Webdesign</a></li>
                    <li><a href="#">PHP | MySQL</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Über mich</a></li>
        </ul>
        <div class="clear"></div>
    </nav>

// CSS down \\ HTML up

nav{
        background: #333;
        color: #fff;
        padding: 5px;   
    }

nav ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

nav ul li{
    float:left; 
}

nav ul li a{ 
    color: #fff;
    background: #585858;
    padding: 10px;
    margin-right: 5px;
    display: block;
    text-decoration: none;
    border: 1px solid white;
}

nav ul li a.active{
    background: #373737;
}

nav ul li a:hover{
    color: #333;
    background: #fff;
    border: 1px solid black;    
}

nav ul li ul{
    position: absolute;
    height: 0px;
    overflow: hidden;   
}

nav ul li ul li{
    float: none;
}

nav ul li:hover ul{
    overflow: visible;  
}

nav ul li:hover ul li a{
    padding: 10px;  
}

nav ul li ul li a{
    -webkit-transition: 0.3s;
       -moz-transition: 0.3s;
        -ms-transition: 0.3s;
         -o-transition: 0.3s;
            transition: 0.3s;               
    padding: 0px 10px;
}

Upvotes: 0

Views: 876

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324810

It looks like removing the overflow:hidden from the container suddenly makes the transition work. This leads me to believe it's an "optimisation" in Firefox that doesn't compute the "hidden" element.

Personally, I've used this to produce a similar effect: Rather than hiding the element, give it transform:scaleY(0); normally, and transform:scaleY(1); on hover.

Upvotes: 1

Related Questions