html - element flickering on iphone when jquery.on('click') is used -

consider following js:

$('#main').on('click', '.button', function); 

and corresponding html:

<div id="main"> <span class="button">button</span> </div> 

this works fine far. when element class button clicked, child of main element, function called. unfortunately when viewed iphone, every tap on main element, causes flicker once.

i found out can avoided not binding click event #main, entire $(document).

i haven't found issue online far. know going on , if there nicer solution binding every click element document?

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

adding css solve problem.