3

My basic static React Redux TypeScript app works locally on Windows, and then it also works when I deploy to GitHub Pages for every device I've tested except iPhone 6 iOS 12.0.1 (where it is a blank white screen).

I've researched many articles, such as:

Most of them try to solve the case where all devices show a white page. But that's not my scenario.

Others talk about how older browsers need polyfills, but I've already added try/catch blocks around my use of fetch.

I've also tried changing to "homepage": "." in package.json, but again, I don't think that's related to the issue because most browsers already work, so I know that the assets are being accessed.

Any ideas?

Ryan
  • 22,332
  • 31
  • 176
  • 357
  • I've experienced this multiple times, on various iOS devices, on a project I'm working on. Curious, on the blank/white pages is your UI still interactable? (long press, click, text select, etc..) We grew accustomed to nick-naming it "Ghost Mode", and it had to do with various elements being absolutely positioned and safari's webview doing weird renderings. – Drew Reese Apr 14 '20 at 07:26
  • @DrewReese It's a completely blank page, so there is no UI. I just tried clicking and long-pressing, etc, and don't notice anything interesting. Please upvote the question and click Follow if you like it. Thanks! – Ryan Apr 14 '20 at 07:29
  • Well, in our case, all we saw was a blank white page as well, but we could still click buttons (since we knew where they were) and interact. This only occurred on a couple pages, ever. Our fix was to apply a `transform: translate3d(0,0,0);` CSS on *some* of the components to kick the iOS device into using hardware acceleration to render the UI/webview. This is a link we've in our code documentation: https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela – Drew Reese Apr 14 '20 at 07:35
  • @DrewReese Thanks for your ideas. I finally figured out how to view the error message, and now it makes sense: https://stackoverflow.com/a/61215326/470749 – Ryan Apr 14 '20 at 19:08

1 Answers1

2

Finally I remembered that I could use the free http://xip.io/ service to browse from my iPhone to the "local" React server hosted on my Windows machine.

That way, I could see error messages that wouldn't be visible on production (at GitHub Pages).

I discovered that the error was "ReferenceError: Can't find variable: IntersectionObserver".

So the solution would be to use a polyfill.

See helpful links:

"IntersectionObserver API is supported on iOS Safari since 12.2." That explains why it worked on other iPhones but not mine.

Ryan
  • 22,332
  • 31
  • 176
  • 357
  • Yeah! Apple is great at making seemingly random fixes/changes to safari in each major iOS update (sometimes even with minor version bumps). – Drew Reese Apr 14 '20 at 19:11