Problema de preenchimento de tela em HTML5 para iPhone / iPad
Estou tendo problemas estranhos com o texto em uma tela ao usar um iPhone ou iPad. O texto é desenhado adequadamente (raramente), ou é desenhado de cabeça para baixo, ou não é desenhado. Quando o texto consegue ser desenhado, ele é apagado quando o iPhone / Pad é girado.
Eu tenho o seguinte código. Parece que só consigo fazer com que o texto permaneça na página se eu usar um setTimeout. Parece ser desenhado se eu chamar fillText assim que o documento for carregado.
Alguém mais está enfrentando esse tipo de problema?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//draw_b();
setTimeout('draw_b()', 500); ;
});
function draw_b() {
var b_canvas = document.getElementById("cv");
var context = b_canvas.getContext("2d");
context.fillText("Belated hello world", 50, 50);
}
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>
</body>
</html>