CODEWITHSUNDEEP
jquerygoogle-chromesafarijquery-animatecss-position
damzam
damzam

Reputation: 1961

jQuery animations misbehave on Chrome/Safari when the user zooms In or out

I wanted to show a couple of our designers a quick mock-up of an animation in jQuery, specifically one that would create the appearance of one object moving beneath another.

The example I set up has a $100 bill moving beneath a transparent .png of paper with a hole ripped out. Both elements are set up with absolute positioning, and the paper .png has a higher z-index.

Everything seemed to work fine, but I noticed on Chrome and Safari that zooming in or out throws off the positioning.

I've posted the example here:

http://tdm-analytics.com/js/examples/example-1.html

You'll notice that if you zoom in or out and refresh, the vertical positioning is off.

The code is here:

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script>
    <script>
        $(document).ready(function() {
            $("#100").animate({"top":"-=610px"}, 3000);
        });
    </script>
</head>
<body>
    <div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;">
        <img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" />
    </div>
    <div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;">
        <img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" />
    </div>
</body>
</html>

Not sure if this is something I've done wrong or a jQuery issue. If anyone knows a fix, I would be most grateful for the help.

Upvotes: 2

Views: 897

Answers (2)

justacoder
justacoder

Reputation: 11

Use the margins, for example margin_left to animate horizontally, which works when chrome/safari [and others] are zoomed in.

Upvotes: 1

Anders
Anders

Reputation: 217

I could see no problem with the animation in chrome. Didn't try Safari since it is web kit just as well as chrome.

Or are you refering to the browser scrollbar that appears on certail screen resolutions when zooming in?

Upvotes: 0

Related Questions