is it normal for jquery 'pan' to crash ios safari iphone 4?

Question

I have had many troubles with my site and moved from CSS transitions to Jquery 'pan' effect to make the effect of clouds moving across the sky.

The code I am using is this

<!-- JAVASCRIPT LOADER -->

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.spritely-0.6.js" type="text/javascript"></script>



        <script type="text/javascript">
        $(document).ready(function() {
            $('#far-clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 30});
            $('#near-clouds').pan({fps: 30, speed: 1.3, dir: 'left', depth: 60});
          });
          </script>  



<!-- JAVASCRIPT LOADER -->

to trigger this.

<div class="clouds">
<div id="far-clouds" class="far-clouds stage"></div>
<div id="near-clouds" class="near-clouds stage"></div>
<div class="mainContent"> </div>

with the following styles

#sky {
margin: 0px;
background: url('img/bg.png');
max-height: 200px;
min-height: 150px;
height: 20%;
width:100%;
max-width: 1400px;
margin-bottom: -24px;
}

#clouds {
position: relative;
top:-50px;
}


    .stage {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-width:1400px;
        height:200px;
        overflow: hidden;
        z-index: 100;
    }


    .far-clouds { 
        background: transparent url(img/clouds/far-clouds.png) 1400px 255px repeat-x; 
        background-position-y: -15px;
        position: relative;
        top:-155px;
    }
    .near-clouds { 
        background: transparent url(img/clouds/near-clouds.png) 305px 255px repeat-x; 
        background-position-y: -15px;
        position: relative;
        top:-355px;
        z-index: 102;
    }

There is a noticeable improvement in chrome and the processing power has reduced a lot. However, when I run the site in iOS safari on my iphone 4 it crashes after about 5 minutes.

Is there a problem in my script causing it to crash?

Have I overcomplicated something and done something that could be done in a simpler, more mobile friendly, way?

Does the amount of pixels being animate have an effect on the processing power of the iphone?

Could anybody lend their expertise to the problem as I can't make sense of it, any suggestions even if it means a revamp to an alternative method would be gratefully received.

Thanks

Answer 1

Here is another great example on how to generate clouds using javascript, it may prove to be more stable then the approach your taking: Creating Animated Moving Clouds using HTML5

Here is the live demo:Demo

I hope that helps.