2016-07-14 4 views
5

есть a webpage using WebGL on a fullscreen canvas.Как остановить iOS Chrome от затемнения при касании холста?

У меня есть этот CSS, чтобы остановить выделение на

*, *:before, *:after { 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 

И у меня есть этот код, чтобы остановить в контекстном меню

gl.canvas.addEventListener('contextmenu', function(e) { 
    e.preventDefault(); 
    return false; 
}); 

Но когда я коснуться экрана в хромовой прошивке он тускнеет. Вот gif проблемы, вначале показывающей хром iOS, а затем показывающий сафари iOS.

Imgur

Или вот версия, YouTube

https://youtu.be/1Znsehs-n8E

Примечание: Игнорируйте графики заикание. Мой экранный захват портился по какой-то причине

Обратите внимание, что в хроме фон иногда иногда мигает серым. Когда в Safari он постоянно белый. Это то, что седина в хроме я пытаюсь остановить.

Это действительно раздражает, потому что просто постукивание по экрану эффективно мигает экраном и действительно отвлекает внимание.

Update

Так что я начал пытаться начинать с нуля и добавления деталей в. Похоже, что это не связано с холсту это связано с листинг click событий.

Если у меня есть

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

Это я получаю затемнение. Если я удалю это, я этого не сделаю. Листинг для touchstart событий не вызывает затемнение

Update 2

Так что это определенно не , не связанные с холстом.Если удалить холст и просто использовать DIV, но я проверяю для click я получаю затемнение

Эти настройки CSS не помогло

* { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    pointer-events: none; 
} 

Это работало

elem.addEventListener('touchstart', function(e) { 
    e.preventDefault(); 
}); 

Я не уверены, имеются ли какие-либо другие последствия для preventDefault на touchstart

ответ

3

TL; DR: Это зафиксировал его

elem.addEventListener('touchstart', function(e) { 
    e.preventDefault(); 
}); 

Длинная версия: Смотрите обновления в нижней части вопроса

1

Попробуйте это -webkit-tap-highlight-color: rgba(0,0,0,0);

Если это не сработает, попробуйте pointer-events: none;

+0

Спасибо, но ни один из них работал. Я нашел хотя бы одну работу. – gman

+0

Это решение для меня. Важно отметить, что это необходимо применить к контейнеру с событием click/touch, не обязательно . В моем случае мне нужно было добавить это в родительский контейнер, в котором зарегистрировано событие. Также .. спасибо !! – Evildonald

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