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

Question

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

http://podcast.exploration.io

你知道我该如何追踪这个问题吗？

谢谢

Answer 1

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

Answer 2

如果您在一台设备上出现空白屏幕，而在另一台设备上却没有，请参阅https://stackoverflow.com/a/61215326/470749

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

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

Redux官方文档说：

我们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 调用。

请注意，任何fetchpolyfill 都假定 Promise polyfill 已经存在。确保您拥有 Promise polyfill 的最简单方法是在任何其他代码运行之前在您的入口点启用 Babel 的 ES6 polyfill：

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

Answer 3

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

Answer 4

这个问题对我来说也很重要。当我在思考 webpack 时，我添加以正确导入我遵循这篇文章：http ://mts.io/2015/04/08/webpack-shims-polyfills/

Answer 5

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

Answer 6

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