React/redux app renders blank screen on Safari

问题

I built an app in React/redux that works in every browser I tried, BUT Safari on MacOS and any browser on iPhone. I get no error, no console message, nothing that would give me some idea. It only renders tag in Safari and the screen is blank.

http://podcast.exploration.io

Do you have any idea how could I trace this issue?

Thanks

回答1:

I found the issue. The main reason why it failed was 'fetch' function...which is not available in Safari. I'm not sure why it wouldn't print anything, but I suspect, because 'fetch' was called inside try/catch.

回答2:

I had a similar issue. my list items would get rendered but not painted. so I could see them in dev tools, but they were all white/transparent. I tried adding a transform: translateZ(0) to the list items, and it fixed the issue.

回答3:

The issue was fetch for me too. As I'musing webpack I add to correctly import i following this article: http://mts.io/2015/04/08/webpack-shims-polyfills/

回答4:

If you have a blank screen on one device but not another, see https://stackoverflow.com/a/61215326/470749

Also, this could happen if your code uses fetch somewhere, and your browser doesn't support it.

Check for browser and OS support: https://caniuse.com/#search=fetch

The official Redux docs say:

We use fetch API in the examples. It is a new API for making network requests that replaces XMLHttpRequest for most common needs. Because most browsers don't yet support it natively, we suggest that you use cross-fetch library:

// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 

Internally, it uses whatwg-fetch polyfill on the client, and node-fetch on the server, so you won't need to change API calls if you change your app to be universal.

Be aware that any fetch polyfill assumes a Promise polyfill is already present. The easiest way to ensure you have a Promise polyfill is to enable Babel's ES6 polyfill in your entry point before any other code runs:

// Do this once before any other code in your app 
import 'babel-polyfill'

回答5:

Had exactly the same problem. It was due to the use of lookbehind in a regular expression, which does not seem to be supported by Safari. See this thread

来源：https://stackoverflow.com/questions/37116068/react-redux-app-renders-blank-screen-on-safari