title: Chart JS not working with Phonegap
body: <p>i got a dynamically loaded Chart working on several browsers and also on my iPhone. But when i try to open the chart with phonegap on my iPhone the canvas is totally buggy. </p>
  
  <p>Are there any known issues using Chart JS with Phonegap?</p>
  
  <p>it should look like this:
  <a href="https://i.stack.imgur.com/qGVdL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qGVdL.png" alt="open website via browser on iPhone"></a></p>
  
  <p>but with Phonegap it looks like this:
  <a href="https://i.stack.imgur.com/wmTw0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wmTw0.png" alt="open Chart with Phonegap on iPhone"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="temp_graph" style="display:none;"&gt;
  &lt;h2 id="tmp_label"&gt;&lt;/h2&gt;
  &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#temp_graph {
  margin-top: 5%;
  width: 90%;
  background-color: #fff;
  display: inline-block;
  padding: 2%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 58, 0.05);
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var temp_graph_div = document.getElementById('temp_graph');
  
  var canvas = document.getElementById('myChart'),
      ctx = canvas.getContext('2d'),
      startingData = {
          labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
          datasets: [{
                label: '°C',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(255, 205, 200,0.4)",
                borderColor: "rgba(255, 205, 200,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                responsive: true,
                maintainAspectRatio: true,
                data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
            }]
      };
  
  var myChart = new Chart(ctx, {
      type: 'line',
      data: startingData,
  });
  
  
  temp_graph_div.style.display = 'inherit';
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>EDIT:
  added a border for the canvas and opened the website via browser (safari ios)
  <a href="https://i.stack.imgur.com/fxMoA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fxMoA.png" alt="with border and without phonegap"></a></p>
  
  <p>added a border for the canvas and opened the website via phonegap
  <a href="https://i.stack.imgur.com/iGipX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iGipX.png" alt="with border and phonegap"></a></p>
  
  <p>seems like the width is incorrect, but why are there different widths for the same mobile device? </p>