HTML5 canvas issue when I test on mobile's browser

[TomKl]

Hi

I'm working on an Animate cc project to make an HTML5 canvas page.
The issue will appear when I see the page on my mobile's browser. the issue is when I click any buttons in it then a blue transparent overlay will appear on all around of the screen and suddenly disappear. I searched about it on the internet but I couldn't find an answer to fix it. you can check the issue from the following address(please check it on your mobile browser):

My apps link 

This is the codes that I used for its click event:

thisMc=this;

dialogsArr=[thisMc.ivanDialog,thisMc.akilDialog,thisMc.xiaDialog,thisMc.maxDialog,thisMc.mariaDialog,thisMc.observeTxt];
//disapear dialogs
function disapearDialogs()
{
dialogsArr[0].alpha=0;
dialogsArr[1].alpha=0;
dialogsArr[2].alpha=0;
dialogsArr[3].alpha=0;
dialogsArr[4].alpha=0;
dialogsArr[5].alpha=0;
}
disapearDialogs();
dialogsArr[5].alpha=1;

//persons events
thisMc.ivanBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_ivan');
dialogsArr[0].alpha=1;
stage.update();
});

thisMc.akilBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_akil');
dialogsArr[1].alpha=1;
stage.update();
});

thisMc.xiaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_xia');
dialogsArr[2].alpha=1;
stage.update();
});

thisMc.maxBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_max');
dialogsArr[3].alpha=1;
stage.update();
});

thisMc.mariaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();

createjs.Sound.play('my_name_is_maria');
dialogsArr[4].alpha=1;
stage.update();
});

I wondered if anyone knows how to fix this issue.
Please let me know if you know anything about it.

Thank you very much.

Tom

[ClayUUID · Accepted solution]

Let me guess, on an iPhone? Add this to your CSS:

canvas {
	-webkit-tap-highlight-color: transparent;
}

Also, learn to use loops. Your disapearDialogs() function above could be replaced with:

// hide every dialog except the requested one
function showDialog(d) {
	for (var i = 0; i < dialogsArr.length; i++) {
		dialogsArr[i].visible = i === d;
	}
}

And you don't need all the stage.update()s. The stage automatically updates itself every tick.

[TomKl]

Yes, exactly. Thanks, bro. it was a big help.