title: duplicated animation after update to Android Jelly Beans
body: <p>I'm using JQuery 1.1.0 and Phonegap 1.9.0 to develop a html5 App for Android. I have a little animation which draws a battery on the canvas and updates it. It looks like a battery, which is loading. It worked very well on android 4.0.4. </p>
  
  <p>Yesterday I received the update to Android 4.1.1 on my Galaxy Nexus. After that change I had issues with my animation. Now it draws to images on the canvas, one is in front and the other is behind with wrong coordinates. I think it has something to do with the Changes to Java Script Engine V8, maybe caching issues?! On every browser on my PC the animation works very well.</p>
  
  <p>My html code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt; 
  &lt;title&gt;Hella App&lt;/title&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  
  &lt;link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/&gt;
  &lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
      .ui-page { background: black;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  
     &lt;body&gt;
  
  &lt;div data-role="page" id="dataPageBattery" data-theme="a"&gt;
      &lt;h2 align="center"&gt;Battery State&lt;/h2&gt;
      &lt;div data-role="header" data-position="fixed" data-theme="a"&gt;
          &lt;h1&gt;Car Data&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content" align="center"&gt;
          &lt;canvas id="myBatteryCanvas" width="device-width"
              height="device-height"&gt;                        
              Sorry, your browser doesn't support canvas technology        
          &lt;/canvas&gt;
      &lt;/div&gt;
      &lt;h4 align="center" id="batteryProzent"&gt;&lt;/h4&gt;
  
      &lt;script type="text/javascript" src="battery.js"&gt;&lt;/script&gt;
      &lt;script&gt;$(document).on("pageshow",init());&lt;/script&gt; 
  
  
      &lt;div data-role="footer" data-position="fixed" data-id="persFooter"&gt;
          &lt;div data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="home.html" data-icon="home"&gt;Connect&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="carView.html" data-icon="gear"&gt;Cars&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="infoView.html" data-icon="info"&gt;Info&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script&gt;                                       
  $('#dataPageBattery').on('swipeleft',function(){ 
   $.mobile.changePage("geolocation.html", { transition: "slide"});   
   console.log('slideLeft');
  })  
  
  $('#dataPageBattery').on('swiperight',function(){ 
   $.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'});    
   console.log('slideLeft');
  })  
       &lt;/script&gt;
  &lt;/div&gt;
  
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>My java script code, which I'm loading:</p>
  
  <pre><code>    var canvas = document.getElementById("myBatteryCanvas");
        var ctx = canvas.getContext("2d");
        var x = 50;
        var y = canvas.height - 30;
        var mx = 2;
        var my = 1;
        var WIDTH = canvas.width;
        var HEIGHT = canvas.height;
       var prozent = 1;
  
    function drawRect(y, farbe) {
  ctx.beginPath();
  ctx.rect(124, y, 50, 21);
  ctx.fillStyle = farbe;
  ctx.fill();
  
  window.setTimeout("draw()", 10);
   }
  
   function draw() {
  if (y &gt;= 80) {
      y -= my;
      window.setTimeout("drawRect(y,'red')", 10);
  } else if (y &gt;= 50) {
      y -= my;
      window.setTimeout("drawRect(y,'orange')", 10);
      ctx.rect(124, 50 + 50, 50, 40);
      ctx.fillStyle = 'orange';
      ctx.fill();
  
  } else {
      ctx.rect(124, 50, 50, canvas.height - 60);
      ctx.fillStyle = 'lightgreen';
      ctx.fill();
  }
  
  document.getElementById('batteryProzent').innerHTML = '&gt; ' + prozent + ' %';
  prozent++;
  if (prozent % 4 == 0)
      prozent++;
   }
  
   function init() {
  ctx.rect(122, 40, 54, 100);
  ctx.fillStyle = 'floralwhite';
  ctx.fill();
  ctx.lineWidth = 4;
  ctx.strokeStyle = '#303030';
  ctx.stroke();
  
  draw();
   }
  </code></pre>
  
  <p>Another nice issue: If I use this html page as the first page to start with inside the Phonegap code, there is no problem. But if I use it inside the whole App, I'm facing the problems.
  For this reason, I post my first page too:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt; BLE App&lt;/title&gt; 
  &lt;script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  &lt;link rel="apple-touch-icon" href="Logo.png" /&gt;
  
  &lt;link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/&gt;
  &lt;script src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  
  &lt;style&gt;
      .ui-page { background: black;}
  &lt;/style&gt;
  
  &lt;/head&gt; 
    &lt;body&gt; 
  
   &lt;div data-role="page" id="mainPage" data-theme="a"&gt; 
  &lt;div data-role="header" data-position="fixed" data-theme="a"&gt;
      &lt;h1&gt; BLE&lt;/h1&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div data-role="content"&gt;   
      &lt;!-- &lt;p&gt; BLE Test App&lt;/p&gt; --&gt;
      &lt;label for="mainPage_textFrage"&gt;Find BLE Devices:&lt;/label&gt;
      &lt;!-- &lt;input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/&gt; --&gt;
      &lt;a data-role=button id="mainPage_showAnswerButton"&gt;Search&lt;/a&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;div data-role="footer" data-position="fixed" data-id="persFooter"&gt;
      &lt;div data-role="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="home.html" data-icon="home"&gt;Connect&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="carView.html" data-icon="gear"&gt;Cars&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="infoView.html" data-icon="info"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /navbar --&gt;
  &lt;/div&gt;&lt;!-- /footer --&gt;
    &lt;/div&gt;
  
     &lt;script&gt;                                    
  $('#mainPage_showAnswerButton').on('click',function(){
   $.mobile.changePage("searchResult.html", { transition: "slideup"});
   console.log('click');
  })                                       
   &lt;/script&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Is there somebody with same issues? Can somebody help?</p>
  
  <p>Thanks so far!</p>
  
  <p>UPDATE:
  I updated JQuery to 1.7.2 and JQuery Mobile to 1.1.1. But still there is no change. The animation isn't working.</p>