Created attachment 346663 [details] Reproduction Example A bug report at React indicated a strange behavior: Sometimes, tapping somewhere on the screen will cause the whole page to splash: https://github.com/facebook/react/issues/12717#issuecomment-410854325 We could trim it down to the following HTML that still shows the issue: <!DOCTYPE html> <html> <head> </head> <body> <script> document.onclick = function() {}; </script> </body> </html> Opening this page on iOS (I tried 12, 11.4, 11.0, 10.3.1) and tapping anywhere will cause the page to show a grey tap highlight. There are some strange behaviors with this, which leads us to believe that this is a WebKit bug: 1. Removing <!DOCTYPE html> from the HTML will remove the splash. 2. Adding the event handler to body instead of document will also remove it. 3. Changing the tap highlight color via CSS shows no effect: The highlight is still grey although a button on the same page might turn red when tapped. 4. Giving body and html a width and height of 100% will also make the tap disappear. It makes sense that clickable elements show the tap highlight color. If you have an element that is as big as the viewport and add an `click` event to it, it's expected that it shows the tap behavior - There's no way to distinguish that form a giant button. What's strange in the document case is that it only happens under certain conditions and that it's completely unexpected when using frameworks like React that adds event listeners to the document all the time.
<rdar://problem/43015556>