Question

我在React / redux中构建了一个应用程序，它适用于我尝试的每个浏览器，但MacOS上的Safari和iPhone上的任何浏览器都可以。我没有错误，没有控制台消息，没有什么可以给我一些想法。它只在Safari中呈现标记，屏幕为空白。

http://podcast.exploration.io

您是否知道如何追踪此问题？

由于

Answer 1

我发现了这个问题。它失败的主要原因是“获取”＃39;功能...在Safari中不可用。我不确定为什么它不打印任何东西，但我怀疑，因为＆＃39; fetch＆＃39;在try / catch中调用。

Answer 2

我有类似的问题。我的列表项将被渲染但未绘制。所以我可以在开发工具中看到它们，但它们都是白色/透明的。我尝试在列表项中添加transform: translateZ(0)，它解决了问题。

Answer 3

如果一台设备上有黑屏，而另一台设备上没有，请参见https://stackoverflow.com/a/61215326/470749

此外，如果您的代码在某处使用了fetch，而您的浏览器不支持它，则可能会发生这种情况。

检查浏览器和操作系统支持：https://caniuse.com/#search=fetch

official Redux docs说：

我们在示例中使用fetch API。这是用于建立网络的新API 替换XMLHttpRequest以满足大多数常见需求的请求。因为大多数浏览器尚不支持它本身，我们建议您使用 cross-fetch库：
// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 
内部，它在客户端上使用whatwg-fetch polyfill，和服务器上的node-fetch，因此在以下情况下无需更改API调用您将应用更改为通用。

请注意，任何fetch的Polyfill都假定Promise polyfill已经存在当下。确保您拥有Promise polyfill的最简单方法是在任何其他代码之前，在您的入口点启用Babel的ES6 polyfill 运行：
// Do this once before any other code in your app 
import 'babel-polyfill'

Answer 4

问题也取决于我。正如我正在使用的webpack，我添加以正确导入我遵循这篇文章：http://mts.io/2015/04/08/webpack-shims-polyfills/

Answer 5

有完全相同的问题。这是由于在正则表达式中使用了lookbehind，而Safari似乎不支持。看到这个thread

Answer 6

我遇到了同样的问题，并且我意识到我必须更新antd和@ant-design/charts的版本，并且运行良好。

React / redux应用程序在Safari上呈现空白屏幕

6 个答案:

official Redux docs说：