HTML audio playback causing flickering in iPhone

Question

I'm trying to create a simple tuner built using Paper.js on top of a node.js stack.

The tuner works well in a desktop browser, but when in an iPhone or iPad, clicking on one of the six rectangles (or strings) causes an odd flickering of the screen: http://morning-temple-9106.herokuapp.com/

I tried these css fixes that were related to general html flickering on the iphone, but no luck.

canvas {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

here is the JS that loads the audio -- I load the files before playNote is called for faster playback. the flicker occurs even if I load within playNote.

var audioPlayerE = new Audio();
audioPlayerE.src="strings/E.mp3"
audioPlayerE.load();
var audioPlayerA = new Audio();
audioPlayerA.src="strings/A.mp3"
audioPlayerA.load();
var audioPlayerD = new Audio();
audioPlayerD.src="strings/D.mp3";
audioPlayerD.load();
var audioPlayerG = new Audio();
audioPlayerG.src="strings/G.mp3";
audioPlayerG.load();
var audioPlayerB = new Audio();
audioPlayerB.src="strings/B.mp3";
audioPlayerB.load();
var audioPlayerElittle = new Audio();
audioPlayerElittle.src="strings/Elittle.mp3";
audioPlayerElittle.load();

playNote = function(index,count) {
    var noteStr;
    if(index-count==0) {audioPlayerE.play()}
    if(index-count==1) {audioPlayerA.play()}
    if(index-count==2) {audioPlayerD.play()}
    if(index-count==3) {audioPlayerG.play()}
    if(index-count==4) {audioPlayerB.play()}
    if(index-count==5) {audioPlayerElittle.play()}
}

Here is my github repo: https://github.com/dannycochran/cs184

Answer 1

from:

iPad Safari: How to disable the quick blinking effect when a link has been hit

didn't realize it was just a blinking effect, adding this to the css fixed it:

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