Chrome ломает дизайн моего веб-приложения на сенсорных экранах

Question

Я студент HCI, работающий над простым приложением для нажатия кнопок в HMTL / CSS / JS.Я более знаком с Ux / UI / IA / IxD, поэтому я птенец, когда дело доходит до кода.

Справочная информация: Мой проект веб-приложения представляет собой симулированный музыкальный инструмент для людей с ограниченными физическими возможностями, такими как паралич или параплегия, для воспроизведения живой музыки.После завершения он будет онлайн бесплатно для всех, у кого есть доступ в интернет.У меня есть прототип 2, и я жду разрешения IRB / ORP для тестирования с пользователями.Я использовал это время для поиска музыкантов-добровольцев, чтобы предоставить аудио и проверить другие проблемы с доступностью, такие как тестирование дальтонизма и контрастность изображения.

Тем временем Chrome - это зло.В моем университете я не нашел никого, кто мог бы объяснить, почему это происходит.Я надеюсь, что может быть решение проблемы HTML / CSS.

Проблема: Когда на устройстве с сенсорным экраном в Chrome нажимается кнопка, появляется всплывающее окно подтверждения / подсветка фона (смена цвета), вызываемая нажатием кнопки onClick /.Chrome не делает этого на ПК / ноутбуке с сенсорной панелью или мышью;это только сенсорные экраны.Firefox не делает этого вообще с сенсорными экранами.Я еще не смог протестировать его с Mac / iPad / Safari.(Несвязанный, но интересный: Firefox также не нарушает центрирование CSS, которое Chrome на Android наверняка любит испортить. Yayyy Firefox.)

Есть ли способ остановить Chrome от отображения раздражающего изменения цвета флеш / фона/ выделить на сенсорном экране нажатие кнопки?

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

Музыкальное колесо 2.0

Answer 1

Пожалуйста, попробуйте ниже CSS:

@media (max-width: 600px){
   #canvas, #animation_container {
    width: 100% !important;
    height: auto !important;
   }
}