React: onMouseDown causes splash on real ios browsers

Created on 29 Apr 2018 · 9Comments · Source: facebook/react

Do you want to request a feature or report a bug?

bug

What is the current behavior?

unexpected grey splash caused by onMouseDown on real ios device's browsers, both safari and chrome.
Please checkout this grey splash issue first
I did some trial later, and find out that vanilla html <button onmousedown="">btn</button> doesn't cause grey splash, but with React's jsx <button onMouseDown={()=>{}}></button>, there is a noticeable grey splash

What is the expected behavior?

who wants a splash?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^16.3.2"

Safari DOM Bug

Source

huhaixiao

Most helpful comment

Okay, testing this in CodeSandbox was really confusing because of some other code it bundles in.
I think I got to a minimal repro though:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
<script>
  var btn = document.createElement("button");
  btn.innerText = "hi";
  document.body.appendChild(btn);
  document.addEventListener('mousedown', (e) => {
    if (e.target === btn) {
      alert('hi');
    }
  });
</script>
</html>

There are two things that "fix" it:

If I remove <!DOCTYPE html> in the beginning, the flash is gone
If I change document.addEventListener to document.body.addEventListener (or get even more specific), the flash is also gone

It seems like the proper solution to this will be https://github.com/facebook/react/issues/2043. In the meantime, you can probably work around it by not adding mouse event listeners on touch devices (and instead using touch event listeners). Sorry about that!

gaearon on 7 Aug 2018

❤3 👍3

All 9 comments

Can you create a reproducible example?

gaearon on 2 Aug 2018

For future reference, the reproducing example is this:

import React from "react";
import ReactDOM from "react-dom";

function Index() {
  return <button onMouseDown={() => {}}>Wtf</button>;
}

ReactDOM.render(<Index />, document.querySelector("#root"));

https://codesandbox.io/s/p3npm3o6j7

The splashes the author is referring to occur not when you click on the button, but when you click on the body itself several times in a quick succession.

gaearon on 6 Aug 2018

The problem is not specific to React; this also reproduces it:

document.body.addEventListener(
  "mousedown",
  function() {}
);

gaearon on 6 Aug 2018

Here is what Polymer does:

https://github.com/Polymer/polymer/blob/59405b57b3f7f3732b7f1db07ef1a76b1871814e/lib/utils/gestures.js#L92-L93

https://github.com/Polymer/polymer/blob/59405b57b3f7f3732b7f1db07ef1a76b1871814e/lib/utils/gestures.js#L210

https://github.com/Polymer/polymer/blob/59405b57b3f7f3732b7f1db07ef1a76b1871814e/lib/utils/gestures.js#L545-L547

gaearon on 6 Aug 2018

Hmm.. there was clearly some issue with how I was testing this. It appears that CodeSandbox preview mode is buggy. I'll need to look at it again — for now previous conclusions might be wrong.

gaearon on 6 Aug 2018

Okay, testing this in CodeSandbox was really confusing because of some other code it bundles in.
I think I got to a minimal repro though:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
<script>
  var btn = document.createElement("button");
  btn.innerText = "hi";
  document.body.appendChild(btn);
  document.addEventListener('mousedown', (e) => {
    if (e.target === btn) {
      alert('hi');
    }
  });
</script>
</html>

There are two things that "fix" it:

If I remove <!DOCTYPE html> in the beginning, the flash is gone
If I change document.addEventListener to document.body.addEventListener (or get even more specific), the flash is also gone

gaearon on 7 Aug 2018

❤3 👍3

This seems to be the minimal example to reproduce this issue. What's strange about this:

This happens whenever a click-ish (both mousedown and click seem to work) is attached to the document.
If I add the following CSS * { -webkit-tap-highlight-color: red; }, the tap will still be grey, even though a button might turn red.
Zooming in will also make this disappear.
Removing <!DOCTYPE html> does fix it as well. (as @gaearon pointed out earlier).

You can try it out without the CodeSandbox chrome using this URL: https://yjy8j5v5rz.codesandbox.io/

I'm downloading a few older iOS versions now to see when this was added.

philipp-spiess on 7 Aug 2018

@gaearon You beat me to it 😬

Here's another workaround I found 🤔 :

html, body {
  width: 100%;
  height: 100%;
}

philipp-spiess on 7 Aug 2018

I don't think that #2043 would be a fix for this issue. If you mount your React app into a container that is big enough to fill the whole screen (which most React apps probably are) and then add the click listener to that container, the same issue persists: https://codesandbox.io/s/o4x23pr8m6

What's different with the non-document listeners though:

The behavior is always reproducible, no matter if we add <!DOCTYPE html> or not.
We can use -webkit-tap-highlight-color: transparent; to remove it.

I've filed a WebKit issue for the behavior we're seeing with document as it seems very inconsistent: https://bugs.webkit.org/show_bug.cgi?id=188362

philipp-spiess on 7 Aug 2018

❤1

Was this page helpful?

0 / 5 - 0 ratings