HTML5 Canvas на iPhone выделяется на событиях touchstart / mousedown

Question

При каждом прикосновении к холсту (и удержании) он выделяется более темным цветом. Когда сенсор отпущен, он возвращается в нормальное состояние. Это не выделение текста, это то же самое выделение, которое iPhone использует для гиперссылок.

Я использую jQuery для привязки событий:

$('canvas').bind('mousedown touchstart', function(e) {
    var c = $(this), offset = c.offset();
    var touch = {
        x: (e.targetTouches ? e.targetTouches[0].pageX : e.pageX) - offset.left,
        y: (e.targetTouches ? e.targetTouches[0].pageY : e.pageY) - offset.top
    };

    testApp.lastTouch = touch;

    return false;
});

Проблема возникает хуже, когда приложение было сохранено на «Домашнем экране». Это происходит в веб-браузере при касании края холста, но в приложении на главном экране это происходит независимо от того, к чему прикоснулся холст.

В чем может быть причина этой проблемы?

Answer 1

В конце концов я обнаружил, что проблему можно решить с помощью следующего CSS:

.puzzle canvas {
    -webkit-tap-highlight-color: transparent;
}

Answer 2

Может быть, вам нужно отменить размытие элемента при просмотре страницы?

$(window).focus(function() { $(':focus').blur(); });

или ...

$(document).ready(function() {
    setTimeout(function() {
        $(':focus').blur();
    }, 200); // Arbitrary amount.
});

Похоже, грубое решение, но это может быть полезно.