Iphone image generated using html canvas appears cropped if unrelated scripts removed_问答_开发者

Iphone image generated using html canvas appears cropped if unrelated scripts removed

开发者 https://www.devze.com 2023-04-13 09:08 出处：网络

I am trying to view an image on the iphone that is generated using the html5 canvas. The browser page detects the iphone then redirects to the iphone specific page.

I am trying to view an image on the iphone that is generated using the html5 canvas.

The browser page detects the iphone then redirects to the iphone specific page. The image is displayed properly.

Now here is the problem. The iphone page is a stripped back version of the browser page. When stripping it back I found that when I removed 2 completely unrelated scripts from the page, the image appeared cropped on the iphone (the bottom of the image appeared cropped.) Just to be sure. I substituted the scripts with other scripts. Regardless of the scripts involved, when 2 scripts were present the image would display properly.

I also found that if the iphone page without the scripts was loaded directly (not redirected) the image displayed correctly. It was only when redirected from the browser page to the iphone page without the scripts that it didn't work. Reloading the iphone page also displayed the image correctly.

Incidentally, I've noticed a similar cropping affect when I change the orientation of the phone to landscape and back but I'm not sure if this is related at all.

I'm guessing the cropping has something to do with when the canvas is generated, but I'm not sure. This has me pretty stumped.

Anyway, here is the code for the iphone page.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

      <title>canvas image thingy majig</title>
            <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
            <link rel="apple-touch-icon" siz开发者_JAVA百科es="72x72" href="touch-icon-ipad.png" />
            <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
      <script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">

      <section id="drawingArea">
            <canvas id="canvas"> </canvas>      
      </section>      
                            <input class="reset" type="button" value="Clear" onClick="window.location.reload()">


                                    <script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
                                    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

</body>
</html>

Does anyone have any ideas about what is going wrong?

EDIT: Just for reference I was using an iphone 4 with firmware version 4.1(8B117).

It seems that it is a problem with timing.

I modified the above code so that