Next.js: Safari 10 Support

[Timer]

Do we want to support Safari 10? This browser is end-of-life but seems to still have a decent number of active users.

We've had at least two issues crop up about it (I've seen more that I don't have on hand):
Fixes https://github.com/zeit/next.js/issues/9782
Fixes https://github.com/zeit/next.js/issues/9827

This is due to Safari 10 incorrectly implementing URL, so Next.js wont work even if users polyfill support back. As a result, client-side transitions try to happen via server-side and fail:

Correct behavior (Safari 11+):

[lachlanjc]

I ran into this the other day. I was trying to present a site I made on a school computer & all the links didn’t work at all—they didn’t even degrade as I expected to regular a tag behavior, they just didn’t work. Good to know why that was happening.

[ghost]

9782 protocol can use RegExp, so the problem will be resolved.

[ahmadawais]

I just wanted to chime in here and share that I am having the same issue on iPhone 7/8 for a Next.js/Zeit based game we intend to launch mid-January (by which I mean we are excited; it's not meant to put pressure here during the vacations at all). The app just gets stuck and there isn't much there in the console to file an issue. It's most definitely an issue with routing though.

I also have an update that on iPhone 7 with the latest Chrome and Safari versions, this issue exists whenever users click a next.js Link component. I'm investigating what I can do there since it works everywhere else except for the old iPhone (even with new software).

P.S. Please work on this after the vacations. It's not a blocker for anything.

[ghost]

In our company's business project, We use next.js with version 9.16, some users report us to could not visit our web app, it makes me so depressed and it is a thorny issue. I try to fix it in my private NPM, I find building the next.js project so difficult.

[tpreusse]

We had to roll back from 9.1.6 to 9.1.4 after discovering that all links broke on iOS 10 (reported by users). _Clarification: Links broke starting with 9.1.5._

In dev I then got «Invalid href passed to router» in the simulator. Downgrading to 9.1.4 solved it:
https://github.com/orbiting/republik-frontend/commit/3aa7513599d45f2d92e5de7d649629c518412448

For us the links completely broke. Not falling back to server-side navigation. It might be a good idea to ensure that native a tag navigation still happens in production when Router throws an error. But would make it harder to detect it in dev 🤷‍♂

Move preventDefault after Router call?
https://github.com/zeit/next.js/blob/1546fcdcfd871cde1ffc0fce4ba9153c2786d0e2/packages/next/client/link.tsx#L189-L206

We also use next-routes, maybe the combination had an impact but I don't think so.

[olpeh]

This is definitely a blocker for us and we are currently waiting for this to be implemented before upgrading. Hope you could prioritize this.

[carloscuesta]

We're using 9.2.0 and found the exact same problem. Can confirm that downgrading to 9.1.4 fixed the problem as @tpreusse points out 🙏

[timneutkens]

This issue is solved in 9.2.1

[carloscuesta]

Wow! That was fast. Really appreciate the work you put on this project. Thanks!

The issue should be closed then @timneutkens

[timneutkens]

We kept it open as there's a few other issues related to native-url.

[karl]

It looks like this bug is back in 9.2.2-canary.15.

I've tested 9.1.7 and it displays the bug as expected, it is fixed in 9.2.1, but has re-appeared in 9.2.2-canary.12 (and is still present in 9.2.2-canary.15).

The bug is still fixed in 9.2.2-canary.11. I wonder if this change (https://github.com/zeit/next.js/pull/10419) in 9.2.2-canary.12 is the cause of the bug re-appearing?

[karl]

Thanks @Timer !

[olpeh]

We upgraded to 9.3.3, but links don't work now on iOS 10 Safari.

Seems similar to #9782. Can't confirm right now as I did not see any errors, just that the links did not work – no navigation happened.

[tpreusse]

We also got reports about broken links again from users with old iOS and Android versions.

The problem seems to be that native-url returns a protocol on those devices even when it shouldn't. Probably a problem that only occurs in combination with the url-polyfill and maybe even then with certain browser engine version only.

@olpeh I used a ultima ratio solution for now and disabled native-url via next.config.js:

module.exports = {
  webpack: config => {
    const alias = { ...config.resolve.alias }
    delete alias.url // alias to native-url
    config.resolve = {
      ...config.resolve,
      alias
    }
    return config
  }
}

(by doing that you'll also loose the 7kb optimisation of native-url on all platforms)

Specifically broken were: iOS 9.3 (reproduced in Simulator), Android 6 (only reported, not reproduced)

@Timer would you like to see the root issue solved in native-url/url-polyfill or could you also imagine adapting the protocol check in the router?
https://github.com/zeit/next.js/blob/b274fe39d38111588e625342a89dc568ad38fff5/packages/next/next-server/lib/router/router.ts#L395-L404

(e.g. doing a string check on the unparsed url like url.match(/^[a-z]+:/))

The «not returning a protocol» logic of native-url is quite convoluted 🙈
https://github.com/GoogleChromeLabs/native-url/blob/19aacc0a82f7e36995bde6adc6876f6140d6d06a/src/parse.js#L95-L126
So wouldn't be surprised if more accidental protocol returns happen down the line.

[olpeh]

Thanks @tpreusse this workaround seems to work and we can go to prod with that. Of course it's not optimal as you mentioned about the 7kb optimization loss, but it's better than broken links :+1:

[majidzeno]

@tpreusse Thanks, this workaround is doing the job.

[chuyik]

Report: This still happens on Next.js 9.3.4, while old chromium browser(49.0.2623.221) could not redirect with <Link />, but the workaround above works perfect.

[codeHatcher]

experiencing a similar issue here

[carloscuesta]

I can confirm that with[email protected] the issue exists again. I don't know why this keeps getting removed, maybe next doesn't wants to support those browsers anymore ?

Should be this included again on Next ? Or we should implement the workaround in order to support older browsers ?

Was this introduced at https://github.com/zeit/next.js/pull/10726 ?

[phamhieu]

I can confirm that with [email protected] the issue exists on iOs 12.1.4 Everytime clicks on a link, it goes to 404 page.

I have another device with iOs 12.4.3, it works properly.

[ztratar]

Is this just Safari 10?

I am also getting errors on iOS 13.3.1. Most times people click a link in iOS Safari, the site crashes. I have sentry installed and it's not throwing errors. Mobile safari appears to be the only affected browser, and this seems to happen due to "next/Link".

site: https://billionaireboard.com

[ztratar]

FYI - it appears that only iOS 13.3 so far has been verified to cause this issue. Newer versions (13.14.5) have confirmed to function properly.

[zhbhun]

@karl

Do we want to support Safari 10? This browser is end-of-life but seems to still have a decent number of active users.

We've had at least two issues crop up about it (I've seen more that I don't have on hand):
Fixes #9782
Fixes #9827

This is due to Safari 10 incorrectly implementing URL, so Next.js wont work even if users polyfill support back. As a result, client-side transitions try to happen via server-side and fail:

Correct behavior (Safari 11+):

@Timer It's not ios safari bug, ios safari 10 URL is valid. I found ios safari 10 would download next.js polyfill chunks, which have a module named url-polyfills —— https://github.com/zeit/next.js/blob/v9.3.6/packages/next-polyfill-nomodule/src/index.js#L50. As you've said, new URL('/blog') shoud throw error. In fact, ios safari 10 native URL throw error correctly, and url-polyfills doese not throw error.

test demo: https://codesandbox.io/embed/solitary-river-7eent?fontsize=14&hidenavigation=1&theme=dark

So, if browser download next.js polyfill, router must break. By the way, how next.js decide which version browser should donwload polyfill?

url-polyfill had fix this bug https://github.com/lifaon74/url-polyfill/pull/54, but not release new version.

[acifani]

Same thing happens for old Chrome versions (e.g. 49), as documented in https://github.com/zeit/next.js/issues/11702

[alexypdu]

Upgrading to [email protected] fixes the issue on iOS 10.2.1.

P.S. 9.4.1 should be enough as #12829 included in the release.

[carloscuesta]

I'm using the solution proposed by @tpreusse . Has this issue been fixed on Next 9.4 ? I upgraded to 9.4.4 and would be cool to have confirmation from the Next.js team 🙏

Thanks!

[timneutkens]

@carloscuesta based on @alexypdu this issue has been fixed 👍

[borisdedejski]

It is not working again I have next 9.4.4 and it is not working in safari :(

[timneutkens]

It is not working again I have next 9.4.4 and it is not working in safari :(

Try next@canary, we recently made some more updates for edge cases with Safari