full page grey splash on ios

[huhaixiao]

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

[huhaixiao]

I produced this issue on real Apple device, screen capture is tricky, so I took two pictures, this grey splash is noticeable, I cloned the create-react-app example, build and deployed it at here, I believe if you try this on real device, you can notice the splash, many thanks!

[mbrookes]

I can reproduce the issue at the linked example.

[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

[oliviertassinari]

One more though, removing the button from the page solves the problem: https://codesandbox.io/s/v39j4kzov5.

[gaearon]

facebook/react#12717 (comment)

[oliviertassinari]

@gaearon Thanks for the heads up.

[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.