Ошибка веб-браузера Android WebView HTML5

У меня есть приложение для Android, которое использует WebView для загрузки графического интерфейса с использованием HTML. Существует < холст > элемент, в который я рисую диаграммы, используя Chart.js Javascript-библиотеку для построения диаграмм. Он был протестирован на 3 устройствах. На двух из них он отлично работает (Android 2.2 и 2.6), но на более поздней версии андроида (4.1.2) холст делает его двойным: все графики видны дважды на холсте, один из них сдвинут немного вверх и влево.Ошибка веб-браузера Android WebView HTML5

canvas with double chart

В чем проблема с холстом? Почему он удваивает сделанные вещи? Как я могу сделать его рендерингом только один раз?

Вот код:

HTML:

<canvas id="graph_canvas"></canvas>

JavaScript:

var canvas=document.getElementById("graph_canvas"); 
canvas.height=200; 
canvas.width=200; 
var graphSelection=document.getElementById("graphSelection"); 
var ctx = canvas.getContext("2d"); 
var data_=JSON.parse(JI.getGraphData(graphSelection.value));  
var myNewChart = new Chart(ctx).Line(data_);

Где graphSelection является < выбрать > элемент, с которым мы выбираем диаграмму, JI.getGraphData возвращается Данные JSON для Chart.js.

источник

2013-10-03 Jaka

Попробуйте сделать положение графика фиксированным, используя тег стиля, в html-код холста –

, который сработал. он испортил некоторые другие вещи, но график работает. благодаря! – Jaka

появилась новая проблема, я разместил ее под http://stackoverflow.com/questions/19847582/chart-js-canvas-resize – Jaka

Если вы не хотите проблем, вызванных «позицией: исправлено»; on, родительский элемент canvas не должен иметь свойство css переполнения со значением «hidden».

Так определите что-то вроде «переполнение: видимо»; на родительский элемент.

источник

2014-01-11 21:56:26

На самом деле я решил аналогичную проблему, установив 'overflow: hidden;' в родительский элемент canvas , – swen

Удаление переполнения: скрыто; решил мою проблему. Благодаря! –

Попробуйте это:

// If Samsung android browser is detected 
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) { 

    // Tweak the canvas opacity, causing it to redraw 
    $('canvas').css('opacity', '0.99'); 

    // Set the canvas opacity back to normal after 5ms 
    setTimeout(function() { 
     $('canvas').css('opacity', '1'); 
    }, 5); 

}

источник

2014-01-30 10:13:58

я тоже встретил эту проблему. Я решил это, используя position:relative , left and -webkit-transform instead margin;. Проблема была решена случайно.

источник

2016-04-11 07:13:36 warlock

ответ

Смежные вопросы