Chrome打破了我在触摸屏上的网络应用设计

Question

我是一名HCI学生，致力于HMTL / CSS / JS中的简单按钮按下应用程序。我对Ux / UI / IA / IxD更加熟悉，因此在代码方面我是幼鸟。

背景： 我的网络应用程序项目是一种模拟乐器，供患有瘫痪或截瘫之类的残障人士播放现场音乐。完成后，它将可以免费在线使用，任何有互联网访问权限的人都可以使用。我已经启动并运行了原型2，正在等待IRB / ORP批准与用户进行测试。我一直在利用这段时间寻找志愿音乐家，以提供音频并测试其他可访问性问题，例如色盲测试和图像对比度测试。

同时，Chrome变得邪恶。我在大学里找不到任何人可以解释为什么会这样。我希望可能有针对此问题的HTML / CSS解决方案。

问题： 在Chrome的触摸屏设备上按下按钮时，将通过onClick /按下按钮触发确认屏幕闪烁/背景突出显示（颜色变化）。 Chrome不会在使用触摸板或鼠标的PC /笔记本电脑上执行此操作；这只是触摸屏。 Firefox完全不使用触摸屏执行此操作。我还不能在Mac / iPad / Safari上进行测试。 （无关但有趣的是：Firefox也没有破坏CSS中心，而Android上的Chrome肯定喜欢弄乱CSS中心。YayyyFirefox。）

有什么方法可以阻止Chrome在触摸屏按钮上显示烦人的Flash /背景颜色变化/高亮显示？

我不希望此Web应用程序伤害任何有癫痫发作风险的人。

Music Wheel 2.0

Answer 1

pls请在CSS下方尝试：

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