Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在ios的safari上bfcache失效 #8109

wen911119 opened this issue Apr 30, 2018 · 5 comments


Copy link

@wen911119 wen911119 commented Apr 30, 2018



Reproduction link

Steps to reproduce

1.git clone
2.npm install
3.npm start

What is expected?


What is actually happening?




This comment has been minimized.

Copy link

@sodatea sodatea commented Apr 30, 2018

This is quite an interesting problem. Didn't notice that before.

Translation of this bug report:
When Vue is included in a webpage, back-forward cache no longer works on iOS Safari. That means, when navigating back from any other url, onpageshow event's persisted prop always equals false, and the scroll position does not get preserved.

After some investigation, I found it caused by this line:

const channel = new MessageChannel()

It's the MessageChannel instance created during Vue's initialization process that prevents Safari from caching this page.

If I understand correctly, as of 2.6.x, Vue.nextTick uses microtask by default, and MessageChannel is only used for deferring DOM event callbacks. Maybe we can consider requestAnimationFrame as an alternative now?


This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Apr 30, 2018

requestAnimationFrame has too long a delay and is quite indeterministic. We will likely revert to always using microTasks. Using MessageChannel fixed a few edge cases but caused more problems in the end...


This comment has been minimized.

Copy link

@xilin xilin commented May 8, 2018

@sodatea Could you share the steps you used to locate the bug? It seems that even I assign MessageChannel to an empty implementation, bfcache still not work in our website. After checking this, I still don't know how to narrow the problems.


This comment has been minimized.

Copy link

@xilin xilin commented May 25, 2018

For anyone who may be interested in how to debug the bfcache, you can setup a WebKit project follow the tutorial and debug the canCacheFrame method in PageCache.

In this VUE case, canSuspendActiveDOMObjectsForDocumentSuspension will fail with an activeDOMObject called MessagePort.


This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Dec 19, 2018

Closed via #8450 (will be out in 2.6)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
4 participants
You can’t perform that action at this time.