full page grey splash on ios

I’m using create-react-app and material, notice that on physical ios device, the page splashes, tried -webkit-tap-highlight-color: transparent, not working, don’t know why, so I tried this example on material-ui repo, the example also get splashes, is this not a bug? If not, how can I fix it. Thanks!!!

• I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

Tech	Version
Material-UI	“material-ui”: “^1.0.0-beta.43”
React	“react”: “^16.3.2”
browser
etc

[oliviertassinari]

The simplest reproduction I could build:

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

I don’t think that we can do anything about it. I have opened a bug on iOS side: https://bugreport.apple.com/web/?problemID=39801425

[gaearon]

I guess you can work around it by detecting iOS and assuming it won’t have mouse support (so you can maybe map mouse events to touch events directly, thereby preventing React from registering a mouse listener). I don’t know if that’s a very good strategy though.