React/redux app renders blank screen on Safari
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.
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.
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 replacesXMLHttpRequest
for most common needs. Because most browsers don't yet support it natively, we suggest that you usecross-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, andnode-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'