Swipe back on mobile browser with getInitialProps flickers the previous page

[mikaa123]

Bug report

Describe the bug

On mobile browsers (tested with Chrome and Firefox), swiping back or forward on a dynamic page (one that gets data from getInitialProps) will sometimes "flash" the previous page while the content is loading. Here is a video that shows the problem.

To Reproduce

1. Create a next.js app with the following pages:

index.js

import Link from "next/link";

export default function Index() {
  return (
    <div>
      <p><Link href="data"><a>Link</a></Link></p>
    </div>
  );
}

data.js

const Index = props => {
  return (
    <div>
      <h1>Test mobile back</h1>
      <ul>
        {props.data.map(name => (
          <li key={name}>
              <a>{name}</a>
          </li>
        ))}
      </ul>
    </div>
  )
};

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

Index.getInitialProps = async function() {
  await sleep(1000)

  return {
    data: ["one", "two", "three", "four", "five", "six"]
  };
};

export default Index;

2. Run it, and access it with a mobile browser.
3. Click on the link, you are now on a page with "one", "two"...
4. Swipe back
5. Now swipe forward. Notice the "flash" of the previous screen.

Now, add "seven" to the data returned in data.js, and notice the problem doesn't happen anymore

Expected behavior

No flash of the previous page when swiping forward or backward on mobile browser. This is what happens now vs this is what should happen

System information

• OS: MacOS
• Browser (if applies): Mobile Safari, chrome and firefox
• Version of Next.js: 9.2.1

[minbelapps]

See my comments on #9833

[guigrpa]

This can be reproduced with desktop Safari as well.

[guigrpa]

Here's an extremely simple isolated example: https://github.com/guigrpa/bug-report-nextjs-flicker (no dependencies apart from React and Next, latest versions of both).

[lmhkkang]

Having the same issue here

Anyone knows exact reason why this happens??

it is because you swiped back the page before the page was rendered completely?

[newpouy]

same issue.
it looks like having relation with user's swiping speed sometimes, but it's not sure.

[newpouy]

above example, even though i add seven, fast swiping back to index page from data page makes a very short flickering.

[TTiole]

Any ETA on when this will be worked on/fixed? Does anybody know of any temporary workarounds?

[dirkjf]

Any updates on this? I only have this issue on iPhones.

[TTiole]

@dirkjf personally, the approach I went for was invalidating the snapshot of the page that webkit generates.
This line contains the conditions under which the snapshot will be generated when you swipe backwards/forwards to navigate.
So I created a hacky hook that I placed in _app in order to invalidate the snapshot as much as I could.

const useSnapshotInvalidation = (router: Router):void => {
    // Disable scroll retention for ios
    React.useEffect(() => {
        if (IOS() && history && history.scrollRestoration && history.scrollRestoration === 'auto') {
            history.scrollRestoration = 'manual';
        }
    }, [IOS() && history && history.scrollRestoration && history.scrollRestoration === 'auto']);
    
    const alternator = React.useRef<number>(0);
    // Scroll slightly and alternate between pages to always invalidate image snapshot.
    // See https://git.vtsmedia.com/vtsfans/web-frontend/-/issues/318 for explanation on this effect and the previous
    React.useEffect(() => {
        const slightScroll = (url: string) => {
            if (IOS() && excepmptPages.every(page => !url.includes(page))) {
                window.scrollTo({ left: 0, top: alternator.current });
                alternator.current = Number(!alternator.current);
            }
        };
    
        router.events.on('routeChangeComplete', slightScroll);
    
        return () => router.events.off('routeChangeComplete', slightScroll);
    }, []);
};

[carbongo]

Any updates on that?

[SteliosKornelakis]

Same thing happens also with "getServerSideProps". Flickering happens only on IOS, on swipe, even with the "useSnapshotInvalidation" hack mentioned above by @TTiole. I still haven't found anything working for me.

"next": "^13.1.2"

[SteliosKornelakis]

Anybody has found a solution to this? The issue also appears when you try to implement modal close (via hash). The most annoying thing is not the flicker, but that in between frames while flickering it's showing Modal Close=>Model Open=>Modal close.

Using both slightScroll with alternator mentioned above and document.body.style.opacity switch, but the issue persists.

[redbar0n]

https://stackoverflow.com/questions/68472768/how-can-i-control-disable-the-swipe-snapshot-used-in-ios-for-navigation-purposes

(on iOS both Chrome and Firefox also use Safari’s webkit browser engine, afaik.)

[youjin-10]

I hope someone from vercel explains the reason for this bug

[redbar0n]

I think this bug is because when you swipe back in Safari on iOS it uses a screenshot of the previous page during the transition but then Safari automatically refreshes the previous page once you get there.

[randomprogramming]

Any updates? This doesn't seem to be a frequent issue so there must be a specific reason why this starts happening...

[johannsonic]

Same issue here, and it's very annoying for the users. Especially image flickering is hard on the eyes :/

[gunnartorfis]

Any updates on this? This happens on every page that is server-side rendered.

To recap since the video link in the OP is broken:

• User navigates from page A to page B
• When swiping back on Safari and Google Chrome iOS, once the swipe back navigation is finished, screen A appears as expected but just for a split second before screen B appears for a split second and then page A appears fully.

I am using server-side rendering for both page A and page B.

[redbar0n]

Related issues on other repos:

oxidecomputer/console#2182

remix-run/react-router#10883

[redbar0n]

It’s not directly an issue with NextJS (more of an SPA issue), but NextJS could/should implement a default way to handle this (since it’s so prevalent), which you could opt-out of if you wanted.

Some potential workarounds in the meanwhile.

I think you can either:

To disable the swipe-back gesture in Safari on iOS, you can use JavaScript to prevent the default action of the "touchstart" event. This is possible on iOS 13.4 and later:

const element = document.querySelector('div');
element.addEventListener('touchstart', (e) => {
  if (e.pageX > 20 && e.pageX < window.innerWidth - 20) return; // Check if near edge
  e.preventDefault(); // Prevent swipe to navigate back gesture
});

This code prevents the swipe-back gesture when the touch event starts near the edges of the viewport[1][2].

—-

Or:

Just make the page transparent before leaving. For example:

window.addEventListener('pagehide', () => {
  document.body.style.opacity = 0
})

The snapshot will be transparent, so you'll see nothing when swiping.

Curtesy of gustavepoch at https://stackoverflow.com/a/72694167

—

Or:

Hacking scroll position to mess with how Safari (and all other iOS browsers, which has to use Safari’s WebKit under the hood) decides what image to use for its preview of the previous page.

Curtesy of Eli at https://stackoverflow.com/a/68491147

——

Citations:
[1] https://stackoverflow.com/questions/55574478/is-there-a-a-way-to-disable-swipe-back-animation-in-safari-on-ios
[2] https://pqina.nl/blog/blocking-navigation-gestures-on-ios-13-4/
[3] ionic-team/ionic-framework#22299
[4] ionic-team/ionic-framework#25167
[5] https://discussions.apple.com/thread/5738986
[6] https://www.reddit.com/r/iOSBeta/comments/wxucto/a_way_to_change_the_left_side_swipe/
[7] https://forum.bubble.io/t/can-we-disable-the-swipe-to-go-back-on-ios/296270