[Webkit-unassigned] [Bug 188362] New: Document click listener will sometimes show tap highlights

Mon Aug 6 16:09:16 PDT 2018

https://bugs.webkit.org/show_bug.cgi?id=188362

            Bug ID: 188362
           Summary: Document click listener will sometimes show tap
                    highlights
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: HTML DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hello at philippspiess.com
                CC: cdumez at apple.com

Created attachment 346663

  --> https://bugs.webkit.org/attachment.cgi?id=346663&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180806/2ececdf8/attachment-0001.html>