How do I stop iOS Chrome from dimming on touching a canvas?

Question

I have a webpage using WebGL on a fullscreen canvas.

I have this css to stop selection

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

And I have this code to stop the context menu

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

But when I touch the screen in chrome iOS it dims. Here's gif of the issue first showing chrome iOS, then showing safari iOS.

Or here's a youtube version

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

Note: Ignore the graphics stutter. My screen capture export messed up for some reason

Notice when in chrome the background flashes gray sometimes. When in Safari it's constantly white. It's that graying in chrome I'm trying to stop.

It's really annoying because just tapping the screen ends up effectively flashing the screen and is really distracting.

Update

So I started trying starting from scratch and adding parts in. It looks like it's not related to canvas it's related to listing for click events.

If I have

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

It I get the dimming. If I remove that I don't. Listing for touchstart events doesn't cause the dimming

Update 2

So it's definately not unrelated to canvas. If I remove the canvas and just use a div but I'm checking for click I get the dimming

These CSS settings did not help

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

This worked

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

I'm not sure if there's any other repercussions for preventDefault on touchstart

Answer 1

Try this -webkit-tap-highlight-color: rgba(0,0,0,0);

If that doesn't work, try pointer-events: none;

Answer 2

TL;DR: This fixed it

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

Long version: See updates to bottom of question

Answer 3

This is a very late answer, but maybe will be useful for someone. Faced the same issue not on a full-screen canvas in Chrome(only) on windows device with a touchscreen. a workaround is adding a touchend event on canvas aside with touchstart.

nativeElement.addEventListener('touchend', function(e){ e.preventDefault(); })