Bug 188362

Summary: Document click listener will sometimes show tap highlights
Product: WebKit Reporter: Philipp Spiess <hello>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: cdumez, dino, m.goleb+bugzilla, thorton, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: iPhone / iPad   
OS: iOS 11   
Attachments:
Description Flags
Reproduction Example none

Philipp Spiess
Reported 2018-08-06 16:09:16 PDT
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.
Attachments
Reproduction Example (122 bytes, text/html)
2018-08-06 16:09 PDT, Philipp Spiess 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-08-07 13:11:13 PDT
<rdar://problem/43015556>
Note You need to log in before you can comment on or make changes to this bug.