188362 2018-08-06 16:09:16 -0700 Document click listener will sometimes show tap highlights 2018-09-06 01:16:43 -0700 1 1 1 Unclassified WebKit DOM Safari 11 iPhone / iPad iOS 11 NEW InRadar P2 Normal --- 1 hello webkit-unassigned cdumez dino m.goleb+bugzilla thorton webkit-bug-importer wenson_hsieh oldest_to_newest 1448272 0 346663 hello 2018-08-06 16:09:16 -0700 Created attachment 346663 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. 1448541 1 webkit-bug-importer 2018-08-07 13:11:13 -0700 <rdar://problem/43015556> 346663 2018-08-06 16:09:16 -0700 2018-08-06 16:09:16 -0700 Reproduction Example issue.html text/html 122 hello PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPC9oZWFkPgo8Ym9keT4KICA8c2NyaXB0Pgog ICAgZG9jdW1lbnQub25jbGljayA9IGZ1bmN0aW9uKCkge307CiAgIDwvc2NyaXB0Pgo8L2JvZHk+ CjwvaHRtbD4=