Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why does this animation make the screen wider on my iPad?

Why does this animation make the screen wider on my iPad?

Problem

I've been having a play around with an animated top-bar on my new site. It works fine in Firefox, but not in IE/Chrome/Safari. Here is a JSFiddle of the code (for some reason it doesn't want to run here, but at least you can see what I'm doing)

http://jsfiddle.net/CHSS8/10/

CSS:

#sky-header {
  background: #5ba0f8;
  width: 100%;
  height: 100px;
}
#nav-bar-top {
  background: #228D00;
  width: 100%;
  height: 50px;
  padding-top: 4px;
  padding-left: 10px;
}

jQuery:

toggleSun();
setTimeout( function() { toggleCloud1(); },1000);
setTimeout( function() { toggleCloud2(); },2000);
function toggleSun() {
    $("#sun").animate({
        left: ($(document).width()/2)+"px"
        }, 10000, 'linear', function() {
            $("#sun").animate({
                left: ($(document).width()/2 - 30)+"px"
                }, 10000, 'linear', function() { toggleSun(); });
        });
}
function toggleCloud1() {
    $("#cloud1").animate({
        left: ($(document).width()+200)+"px"
        }, 50000, 'linear', function() {
            $("#cloud1").css('left',"-400px");
            toggleCloud1();
        });
}
function toggleCloud2() {
    $("#cloud2").animate({
        left: ($(document).width()+200)+"px"
        }, 43000, 'linear', function() {
            $("#cloud2").css('left',"-600px");
            toggleCloud2();
        });
}

I'm guessing it has something to do with the way I'm floating the elements, and then doing left negative pixels, to make them go off the screen (before they go back to the beginning, and restart)

I know I can do this with CSS3 animations, but I couldn't get those working (nothing seemed to happen for some reason). I'm also not sure how easy it is to make an item go from one end to the other, even on different screens.

Problem courtesy of: Andrew Newby

Solution

You need overflow:hidden; for #sky-header

Solution courtesy of: Ryan.Hunt

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why does this animation make the screen wider on my iPad?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×