onMouseDown causes splash on real ios browsers #12717
Comments
|
Can you create a reproducible example? |
|
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. |
|
The problem is not specific to React; this also reproduces it: document.body.addEventListener(
"mousedown",
function() {}
); |
|
Here is what Polymer does: |
|
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. |
|
Okay, testing this in CodeSandbox was really confusing because of some other code it bundles in. <!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:
It seems like the proper solution to this will be #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! |
|
This seems to be the minimal example to reproduce this issue. What's strange about this:
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. |
|
@gaearon You beat me to it 😬 Here's another workaround I found 🤔 : html, body {
width: 100%;
height: 100%;
} |
|
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-
I've filed a WebKit issue for the behavior we're seeing with |
Do you want to request a feature or report a bug?
bug
What is the current behavior?
unexpected grey splash caused by
onMouseDownon 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 splashWhat 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"
The text was updated successfully, but these errors were encountered: