Flickering animation in Firefox

Question

I'm doing a slideout login box using only CSS. The problem that I'm facing is that, in FireFox (I'm using Firefox 16.0), the slideout animation flickers. It works fine in chrome and Safari (no animation in IE but doesn't flicker, login box appears fine). here is the HTML:

<div id="slideout">
        <div id="slideout_inner">
             <form id="loginForm" action="#" method="POST">
                <table cellspacing="0">
                    <tbody>
                        <tr>
                            <td><label for="lUsername">Username</label></td>
                            <td><label for="lPassword">Password</label></td>
                        </tr>
                        <tr>
                            <td><input type="text" name="username" id="lUsername" class="required" /></td>
                            <td><input type="password" name="password" id="lPassword" class="required" /></td>
                            <td><input type="submit" value="Login" /></td>
                        </tr>
                        <tr>
                            <td><span class="error"></span></td>
                            <td><span class="error"></span></td>
                        </tr>

                    </tbody>
                </table>
            </form>
        </div>
        <label>Login</label>

and here is the CSS

#slideout {
  position: fixed;
  top: 0px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: -250px;
  left: 0px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover{
  top: 250px;
}
#slideout:hover #slideout_inner{
  top: 0;
}

Here is the JSFiddle of the problem How do I fix the flickering in Firefox? Thanks

Answer 1

This JSFiddle may be able to help you.

Write like this:

#slideout {
  position: fixed;
  top: 0;
  left: 0;
}
#slideout_inner{
    height:0;
    -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  overflow:hidden;
}
#slideout:hover #slideout_inner{
  height:200px;
  border:1px solid red;
}

OR

This JSFiddle.