【问题标题】:Why does my React Redux TypeScript app work everywhere except iPhone 6 iOS 12.0.1 (where it is a blank white screen)?为什么我的 React Redux TypeScript 应用程序除了 iPhone 6 iOS 12.0.1(它是一个空白屏幕)之外的任何地方都可以工作?
【发布时间】:2020-07-26 21:01:56
【问题描述】:

我的基本静态 React Redux TypeScript 应用程序在 Windows 上本地运行,然后当我为我测试过的每台设备部署到 GitHub Pages 时它也可以运行除了 iPhone 6 iOS 12.0.1(它是一个空白屏幕)。

我研究过很多文章,比如:

他们中的大多数试图解决 所有 设备显示白页的情况。但这不是我的情况。

其他人谈论旧浏览器如何需要 polyfill,但我已经在使用 fetch 时添加了 try/catch 块。

我也尝试将package.json 中的"homepage": "." 更改为package.json,但同样,我认为这与问题无关,因为大多数浏览器已经工作,所以我知道资产正在被访问。

有什么想法吗?

【问题讨论】:

  • 我在各种 iOS 设备上,在我正在从事的项目中,多次经历过这种情况。好奇,在空白/白色页面上,您的 UI 是否仍可交互? (长按、单击、文本选择等。)我们逐渐习惯将其命名为“幽灵模式”,这与各种元素的绝对定位和 safari 的 webview 进行奇怪的渲染有关。
  • @DrewReese 这是一个完全空白的页面,所以没有 UI。我只是尝试点击和长按等,并没有发现任何有趣的东西。请对问题进行投票,如果您喜欢,请单击“关注”。谢谢!
  • 好吧,在我们的例子中,我们所看到的也是一个空白的白色页面,但我们仍然可以单击按钮(因为我们知道它们在哪里)并进行交互。这只发生在几页上,永远。我们的解决方法是在 一些 组件上应用transform: translate3d(0,0,0); CSS,以使 iOS 设备使用硬件加速来呈现 UI/webview。这是我们在代码文档中的链接:stackoverflow.com/questions/9807620/…
  • @DrewReese 感谢您的想法。终于想通了怎么查看报错信息,现在说得通了:stackoverflow.com/a/61215326/470749

标签: reactjs redux react-redux


【解决方案1】:

最后我记得我可以使用免费的http://xip.io/ 服务从我的 iPhone 浏览到我的 Windows 机器上托管的“本地”React 服务器。

这样,我可以看到在生产环境中看不到的错误消息(在 GitHub Pages 上)。

我发现错误是“ReferenceError: Can't find variable: IntersectionObserver”。

所以解决方案是使用 polyfill。

查看有用的链接:

“自 12.2 起,iOS Safari 支持 IntersectionObserver API。”这就解释了为什么它适用于其他 iPhone 而不是我的。

【讨论】:

  • 是的! Apple 擅长在每次主要的 iOS 更新中对 safari 进行看似随机的修复/更改(有时甚至有较小的版本冲突)。
猜你喜欢
  • 2021-09-19
  • 1970-01-01
  • 2012-07-27
  • 1970-01-01
  • 2021-08-09
  • 2020-10-18
  • 2018-08-25
  • 1970-01-01
  • 2017-08-08
相关资源
最近更新 更多