0

I am an HCI student working on a simple button pressing app in HMTL/CSS/JS. I am more familiar with Ux/UI/IA/IxD so I am a baby bird when it comes to code.

Background: My web app project is a simulated musical instrument for people with manual disabilities, such as paralysis or paraplegia, to play live music. When completed, it will be online free to use for anyone with internet access. I have prototype 2 up and running and am waiting to IRB/ORP approval to test with users. I have been using this time to search for volunteer musicians to contribute audio and test for other accessibility issues like colorblindness testing and image contrast testing.

Meanwhile, Chrome is being evil. I have not found anyone at my university who can explain why this is happening. I am hoping there may be a HTML/CSS solution to the problem.

The problem: When a button is pressed on a touchscreen device in Chrome, there is a confirmation screen flash / background highlighting (color change) triggered by onClick / button press. Chrome does not do this on PC / Laptop with a touchpad or mouse; it is only touchscreens. Firefox does not do this at all with touchscreens. I have not been able to test it with Mac / iPad / Safari yet. (Unrelated but interesting: Firefox also does not break the CSS centering which Chrome on Android sure loves to mess up. Yayyy Firefox.)

Is there any way I can stop Chrome from displaying the annoying flash / background color change / highlight on a touch screen button press?

I do not want this web app to hurt anyone with risk of seizures.

Music Wheel 2.0

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
Shellie Lewis
  • 13
  • 4
  • https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic This might help you – Second2None Feb 12 '19 at 02:23
  • Seems one of the comments there may be more helpful to you than the answer. Make sure to try adding `-webkit-tap-highlight-color: rgba(255, 255, 255, 0); `. – Andy Hoffman Feb 12 '19 at 03:22
  • Thank you Andy in Portland, this fixed it {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);} @AndyHoffman – Shellie Lewis Feb 25 '19 at 23:46

1 Answers1

0

pls try below css:

@media (max-width: 600px){
   #canvas, #animation_container {
    width: 100% !important;
    height: auto !important;
   }
}
AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57