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

[oliviertassinari]

@huhaixiao We are missing version information. I couldn't reproduce the issue on the iPhone X simulator

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