Jquery .animate() bug in chrome

Question

I have a web page in which jquery's animate() function that works perfectly fine in IE and FF, However it works abnormally in Chrome
here is my COde

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

html{
    width:100%;
    height:100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}

.clearFloat{
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#navigation{
    width:100px;
    height:100%;
    position:fixed;
    z-index:1;
    left:0px;
    position:relative;
}
#navigation .title-list{
    width:450px;
    position:relative;
    left:-350px;
    height:100px;
}

#navigation .title{
    width:90px;
    height:30px;
    background-color:#f5f5f2;
    position:absolute;
    right:-90px;
    top:35px;
}

#navigation .image{
    width:100px;
    height:100px;
    float:right;
    background-color:#e5e5e4;
}
#navigation .image_hover{
    width:100px;
    height:100px;
    float:right;
    background-color:#e5e5e4;
    display:none;
}
#navigation .title-list:hover .image{
    display:none;
}
#navigation .title-list:hover .image_hover{
    display:block;
}


#navigation .sub-menu{
    width:350px;
    height:30px;
    float:right;
    background-color:#f5f5f2;
    margin-top:35px;
    position:relative;
}
#navigation .title-list .drop-sub{
    display:none;
}

#navigation .title-list:hover .drop-sub{
    display:block;
    position:absolute;
    z-index:2;
    width:225px;
    right:20px;
    background-color:#CC3;
    padding-top:70px;
}

#navigation .sub-list{
    width:205px;
    padding:10px;
    height:30px;
    background-color:#e5e5e4;
}

#navigation a{
    display:inline-block;
    width:100%;
    height:100%;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#navigation .expand').hover(function(){
        $(this).stop().animate({'left':'0px'},'fast');
    }, function(e) {
        $(this).stop().animate({'left':'-350px'},'fast');
    });

});
</script>
</head>

<body>
<div id="navigation">
    <ul>
        <li class="title-list expand"><div class="title">About</div><img src="images/navigation/about.png" class="image" /><img src="images/navigation/about_hover.png" class="image_hover" />
        <div class="sub-menu">
            <div class="drop-sub">
                <div class="sub-list"><a href="#">College</a></div>
                <div class="sub-list"><a href="#">History</a></div>
                <div class="sub-list"><a href="#">Principal's Message</a></div>
                <div class="sub-list"><a href="#">Contact</a></div>
                <div class="sub-list"><a href="#">Gallery</a></div>
            </div>
        </div>
        </li>
        <li class="title-list expand"><div class="title">Academics</div><img src="images/navigation/academics.png" class="image" /><img src="images/navigation/academics_hover.png" class="image_hover" />
        <div class="sub-menu">
            <div class="drop-sub">
                <div class="sub-list"><a href="#">Subjects</a></div>
                <div class="sub-list"><a href="#">Structure</a></div>
            </div>
        </div>
        </li>


    </ul>
</div>

</body>
</html>

when i run this code in FF or IE and hover over the menu item the menu item animates towards right as expected

When i run this code in chrome and hover over one of the menu items the menu first goes towards left a little and then goes towards right to its expected position

Anybody has solutions?

EDIT:------------------

This was happening because zoom was set to 110% in chrome. However anyone has solutions for what can be done to avoid this??

Answer 1

This is because positioning in Chrome is set to auto, on page load.

If you set left in your jQuery first off all to what it should be when the page loads, you should be fine.

Jquery .animate() bug in chrome

Question

1 answers

solution1
1 2014-05-19 11:15:27

Jquery .animate() bug in chrome

Question

1 answers

solution1 1 2014-05-19 11:15:27

solution1
1 2014-05-19 11:15:27