我正在使用JQuery 1.1.0和Phonegap 1.9.0开发适用于Android的html5应用程序。我有一个小动画，在画布上绘制电池并更新它。它看起来像一个正在装载的电池。它在android 4.0.4上运行得非常好。
昨天我在Galaxy Nexus上收到了Android 4.1.1的更新。在那次改变后，我的动画出现了问题。现在它绘制到画布上的图像，一个在前面，另一个在后面有错误的坐标。我认为它与Java Script Engine V8的更改有关，可能是缓存问题？！在我的电脑上的每个浏览器上，动画效果非常好。
我的HTML代码是：
<!DOCTYPE html>
<html>
<head>
<title>Hella App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="dataPageBattery" data-theme="a">
<h2 align="center">Battery State</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div data-role="content" align="center">
<canvas id="myBatteryCanvas" width="device-width"
height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
<h4 align="center" id="batteryProzent"></h4>
<script type="text/javascript" src="battery.js"></script>
<script>$(document).on("pageshow",init());</script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div>
</div>
<script>
$('#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');
})
</script>
</div>
</body>
</html>
我的java脚本代码，我正在加载：
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 >= 80) {
y -= my;
window.setTimeout("drawRect(y,'red')", 10);
} else if (y >= 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 = '> ' + 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();
}
另一个不错的问题：如果我使用这个html页面作为第一页开始使用Phonegap代码，那就没问题了。但如果我在整个App中使用它，我就会遇到问题。 出于这个原因，我也发布了我的第一页：
<!DOCTYPE html>
<html>
<head>
<title> BLE App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="Logo.png" />
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1> BLE</h1>
</div><!-- /header -->
<div data-role="content">
<!-- <p> BLE Test App</p> -->
<label for="mainPage_textFrage">Find BLE Devices:</label>
<!-- <input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/> -->
<a data-role=button id="mainPage_showAnswerButton">Search</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<script>
$('#mainPage_showAnswerButton').on('click',function(){
$.mobile.changePage("searchResult.html", { transition: "slideup"});
console.log('click');
})
</script>
</body>
</html>
是否有人有同样的问题？有人可以帮忙吗？
到目前为止感谢！
更新： 我将JQuery更新为1.7.2，将JQuery Mobile更新为1.1.1。但仍然没有变化。动画无效。
答案 0 :(得分：5)
可能的解决方案：
从jquery-mobile-css中删除以下行消除了问题：
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
（删除“overflow-x：hidden”就足够了。）
更好的解决方案是覆盖周围div元素的“overflow-x”属性（而不是canvas-element本身）。
示例（电池状态）：
<div data-role="content" align="center" data-theme="a" style="overflow-x: visible">
<canvas id="myBatteryCanvas" width="device-width" height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
答案 1 :(得分：0)
当您从一个页面转换到另一个页面时出现问题但是当您单独加载页面本身时出现问题时，听起来您需要在页面转换期间（取消）加载内容。 jQuery Mobile在页面转换时加载<div data-role="page">...</div>内的任何内容。这也意味着忽略了这些div之外的任何东西。不仅如此，上一页的javascript代码仍然继续到下一页。
我在2个HTML页面底部看到两个<script>...</script>块，只会加载其中一个，即您刷新页面上的那个。通过在data-role="page divs
您应该更改以下内容
<script>$(document).ready(window.setTimeout("init()", 500));</script>
到
<script>$(document).on("pageshow",window.setTimeout("init()", 500));</script>
根据jQM documentation，您不应使用$(document).ready(...)
答案 2 :(得分：0)
我们在运行Android 4.1.1的手机上遇到了同样的问题。我们有一个显示滑块的html5画布应用程序。滑块的图像显示2次。在我们的Android 4.1,4.0,2.3设备上它显示正常。我不认为您可以通过简单的Java脚本更改来解决此缺陷。它在最新的Jellybean补丁中被打破了。
我们使用了具有多个不同版本的Android的Nexus S和Galaxy Nexus手机来证明这一点（它不是手机专用的）。