Браузер Webkit ‹535 (Android native/ios5 safari) Ошибка HTML5 Canvas Click

Несколько недель назад я столкнулся с ошибкой в ​​Android, из-за которой, если вы размещаете элемент холста в собственном браузере Android (WebKit 534.4) с использованием позиционирования css position:absolute; top:10px; left:100px;, дублированный холст (очевидно, Android использует один для ускорения GPU) отображается в браузере, игнорируя позиционирование.

Итак, если бы у меня был холст в позиции top:100px; left:100px;, мой холст был бы в идеальном положении, но холст с ускорением графического процессора проигнорировал бы его и расположился бы в верхнем левом углу (см. изображения из моего предыдущего вопроса).

Собственный браузер Android, дублирующий холст HTML5 (хорошо в хроме)

Я нашел решение, которое заключалось в том, чтобы вместо этого использовать преобразование CSS, например transform: translate(100px, 100px);, теперь это устраняет проблему, поскольку холст ускорения графического процессора отображается в одном и том же месте (поэтому он не выглядит дублированным)....

НО, как следствие, у меня теперь есть ошибка щелчка.

Поскольку я центрирую холст, когда ширина окна меньше ширины устройства, позиция X будет отрицательным значением, единственная доступная для щелчка область холста, когда это произошло, - это то, что будет отображаться без позиционирования.

Это трудно объяснить, но, надеюсь, это изображение прояснит ситуацию.

Нажмите на ошибку

Я думаю, что это проблема с самим браузером, так как даже когда у меня есть этот код, предупреждение не срабатывает с половины экрана.

canvas.addEventListener('click', function(e) { alert('click'; });

Я предполагаю, что позиция CSS сверху и слева использует ЦП для перемещения холста, поэтому сгенерированный ГП находится в неправильном месте, но CSS перевод использует ГП для перемещения холста, поэтому сгенерированный ГП позиционируется правильно, но ЦП чтение событий мыши без этого смещения ........ AHHHHH!

РЕДАКТИРОВАТЬ: после тестирования на других устройствах я могу подтвердить, что это проблема с браузерами, использующими версию webkit ниже 535, поскольку эта проблема возникает в большинстве собственных браузеров Android и Safari на iOS5.


javascript canvas html css mobile-webkit
person rorypicko    schedule 22.10.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я исправил эту проблему, но я думаю, что это довольно специфично.

if(webKitVer < 535) {
     document.body.style.paddingTop = pos.top + "px";
    if(canSeeWholeOfCanvas) {
        canwrap.style.transform = 'translateX('+pos.left+'px)';
        canwrap.style.left = 'auto';
    } else {
        canwrap.style.left = pos.left + "px";
        canwrap.style.transform  = 'none';
    }
} 
else 
{
    //standard all browsers
    canwrap.style.transform = 'translate('+pos.left+'px, '+pos.top+'px)';
}

кажется хакерским, специфичным для конкретного случая и трудно объяснимым. но это работает

в старых браузерах webkit (как правило, родные браузеры Android и Safari IOS5 есть две ошибки

если холст расположен с css сверху и слева, то дубликат холста, визуализированный графическим процессором (сгенерированный для аппаратного ускорения графического процессора), будет отображаться без учета их свойств, поэтому они не выровнены правильно.

если холст расположен с преобразованием css, то дубликат холста графического процессора правильно выровнен, НО, когда холст расположен в позиции минус X, тогда единственная часть холста, которая будет видна без css, кликабельна

поэтому необходимо переключаться между ними в зависимости от видимости холста

person rorypicko    schedule 23.10.2013