safari popstate bug

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Issue with popstate event on Safari Version 12.0 (13606.2.11)

I'm having a problem using window.onpopstate event. i'm using it to handle the back from browser, but under some circustances the event fires without being triggered by any button, just after being initialized.

Let me be more clear: Page 1: Contains the onpopstate event handler Page 2: Page after the page 1.

When i come from page 2 to page 1, after being initialized, the popstate event is triggered without any other button click.

Is this a bug from Safari? (Happens only on Safari)

Posted on Oct 2, 2018 6:11 AM

Similar questions

• Safari bug There seems to be a bug in Safari. You can store a web page as a tab at the top left corner of your browser (well, close to top left). I have tried this using flightradar24 page. When you login using the Sign In with Apple option, a small window appears with the Touch ID prompt. Unfortunately, when the page was stored as a tab the window does not appear and instead a new tab opens where the browser attempts to contact appleid.apple.com with some authentication data. It never opens. However, when I do the same with the regular tab, the login window appears no problem. I wonder if the problem is known. Thank you Piotr 356 1
• Safari 15.0 jumps to random web sites while scrolling Scrolling in Safari 15.0 is unpredictable. While scrolling on a web page the web page I was reading disappeared and I was sent to a random web page. I was not able to scroll back. This has happened over and over and over again. The only way to avoid having to start all over again is to scroll very very slowly and stop immediately if you see your current selection start to disappear. I had to reload the web page I was on too many times consider this a one time annoyance. The previous version of Safari did not do this. 1281 3
• There is no "Pop up select" button in Safari Preferences MacBook There is no "Pop up select" button in Safari Preferences MacBook. I need pop-ups on company sites. 622 1

Loading page content

Page content loaded

There are no replies.

safari 16 on iOS not firing popState event at tapping the browser back button

The code that hooks the popstate event, which was working before version 15, does not seem to work correctly after version 16. What is the difference between the behavior of the browser back button and calling history.back() in version 16 ?

See https://stackoverflow.com/questions/74233075/popstate-does-not-work-since-safari-16-it-was-working-until-safari-15

• | New Account
• | Log In Remember [x]
• | Forgot Password Login: [x]
• Format For Printing
•  -  XML
•  -  Clone This Bug
•  -  Top of page

• Skip to main content
• Select language
• Skip to search

The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState() , the popstate event's state property contains a copy of the history entry's state object.

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

General info

Browser compatibility.

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report .

A page at http://example.com/example.html running the following code will generate logs as indicated:

Note that even though the original history entry (for http://example.com/example.html ) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back() .

Related Events

• Manipulating the browser history (the History API) 

Document Tags and Contributors

• Skip to main content
• Select language
• Skip to search
• Sign in Github
• PopStateEvent
• No translations exist for this article.
• Add a translation
• Print this article

The popstate event

Specification, browser compatibility.

PopStateEvent is an event handler for the popstate event on the window.

A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState() , the popstate event's state property contains a copy of the history entry's state object.

Note : Just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.

Note : Browsers used to handle the popstate event differently on page load, but now they behave the same. Firefox never emitted a popstate event on page load. Chrome did until version 34, while Safari did until version 10.0.

• funcRef is a handler function.

As an example, a page at http://example.com/example.html running the following code will generate alerts as indicated:

Note that even though the original history entry (for http://example.com/example.html ) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back() .

• HTML5 popstate event
• Manipulating the browser history
• Ajax navigation example

Document Tags and Contributors

• BeforeUnloadEvent
• DOMStringMap
• GlobalEventHandlers
• HTMLAnchorElement
• HTMLAreaElement
• HTMLAudioElement
• HTMLBRElement
• HTMLBaseElement
• HTMLBaseFontElement
• HTMLBodyElement
• HTMLButtonElement
• HTMLCanvasElement
• HTMLContentElement
• HTMLDListElement
• HTMLDataElement
• HTMLDataListElement
• HTMLDialogElement
• HTMLDivElement
• HTMLDocument
• HTMLElement
• HTMLEmbedElement
• HTMLFieldSetElement
• HTMLFormControlsCollection
• HTMLFormElement
• HTMLFrameSetElement
• HTMLHRElement
• HTMLHeadElement
• HTMLHeadingElement
• HTMLHtmlElement
• HTMLIFrameElement
• HTMLImageElement
• HTMLInputElement
• HTMLIsIndexElement
• HTMLKeygenElement
• HTMLLIElement
• HTMLLabelElement
• HTMLLegendElement
• HTMLLinkElement
• HTMLMapElement
• HTMLMediaElement
• HTMLMetaElement
• HTMLMeterElement
• HTMLModElement
• HTMLOListElement
• HTMLObjectElement
• HTMLOptGroupElement
• HTMLOptionElement
• HTMLOptionsCollection
• HTMLOutputElement
• HTMLParagraphElement
• HTMLParamElement
• HTMLPictureElement
• HTMLPreElement
• HTMLProgressElement
• HTMLQuoteElement
• HTMLScriptElement
• HTMLSelectElement
• HTMLShadowElement
• HTMLSourceElement
• HTMLSpanElement
• HTMLStyleElement
• HTMLTableCaptionElement
• HTMLTableCellElement
• HTMLTableColElement
• HTMLTableDataCellElement
• HTMLTableElement
• HTMLTableHeaderCellElement
• HTMLTableRowElement
• HTMLTableSectionElement
• HTMLTemplateElement
• HTMLTextAreaElement
• HTMLTimeElement
• HTMLTitleElement
• HTMLTrackElement
• HTMLUListElement
• HTMLUnknownElement
• HTMLVideoElement
• HashChangeEvent
• MessageChannel
• MessageEvent
• MessagePort
• NavigatorGeolocation
• NavigatorID
• NavigatorLanguage
• NavigatorOnLine
• NavigatorPlugins
• PageTransitionEvent
• PluginArray
• PortCollection
• PromiseRejectionEvent
• RadioNodeList
• Transferable
• ValidityState
• WindowBase64
• WindowEventHandlers
• WindowTimers

Learn the best of web development

Get the latest and greatest from MDN delivered straight to your inbox.

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

• Skip to main content
• Select language
• Skip to search
• Português (do Brasil)
• Add a translation
• Print this article
• laughinghan
• andrewpmckenzie

General info

Browser compatibility, related events.

The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState() , the popstate event's state property contains a copy of the history entry's state object.

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

A page at http://example.com/example.html running the following code will generate logs as indicated:

Note that even though the original history entry (for http://example.com/example.html ) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back() .

• Manipulating the browser history (the History API) 

Document Tags and Contributors

The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState() , the popstate event's state property contains a copy of the history entry's state object.

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

General info

Browser compatibility.

We're converting our compatibility data into a machine-readable JSON format . This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report .

A page at http://example.com/example.html running the following code will generate logs as indicated:

Note that even though the original history entry (for http://example.com/example.html ) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back() .

Related Events

• Manipulating the browser history (the History API)

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors. Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/Events/popstate

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

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

Swiping 'back' in Safari on iOS disables interactivity #637

petru commented Jul 18, 2022 • edited

izaguirrejoe commented Jul 18, 2022 • edited

Sorry, something went wrong.

• ❤️ 1 reaction

petru commented Jul 19, 2022 • edited

domchristie commented Jul 19, 2022 • edited

Petru commented jul 19, 2022, domchristie commented jul 19, 2022.

• 🎉 1 reaction

dhh commented Jul 19, 2022

• 🚀 2 reactions
• 👍 2 reactions

rik commented Jul 19, 2022

Domchristie commented jul 20, 2022.

No branches or pull requests

• Nuxt.js/Vue.js
• INFRASTRUCTURE

Safari環境のNuxtでpopStateが変な動きをする話

先日ブルーベリーガム味という珍しいアイスに出会いました、カリーです。

Nuxt.jsでpopstateを使っている案件を対応したときに、やや挙動が変な感じになってハマったので、その内容を備忘録として残しておこうと思います。

• Nuxt2環境（SPA）
• Safariバージョン16.2 (18614.3.7.1.5)

popstateイベントにてブラウザバック直前に何かしらの処理を入れているNuxt.jsアプリ、

例として、要素編集の途中でブラウザバックしたとき「保存されません、よろしいですか？」のポップアップを出すアプリがあるとします。（編集中か判定などの処理は割愛してます）

Safari環境だと、Nuxtアプリから外部サイトに遷移した後、ブラウザバックでNuxtアプリに戻ってきたタイミングでpopstateイベントが発火してしまいます。

以下の図でいう、③の直後に起こります。

本来ブラウザバック直前に発火するpopstateが、ブラウザバック後のページ内にて発火しています。ナンデ！？

調べてみたところ、この事象には複数の原因がありました。

①外部遷移時、Nuxtのdestroyedが発火しない

このコードではVueインスタンスが破棄される、destroyed発火のタイミングでpopstateイベントを削除する処理を入れています。

しかし、外部遷移時にはVueインスタンスが破棄されず、destroyedが発火しません。その為、明示的なpopstateイベントの削除を行えていませんでした。

②Safariのbfchach

Safari独自のキャッシュの仕組みであるbfcache（バック/フォワードキャッシュ）という機能があり、ブラウザの戻る or 進むを行ったとき、前のページの情報をキャッシュから呼び出します。

これにより外部遷移後ブラウザバックした際に、popstateイベントが残った状態のNuxtアプリへ戻ることになります。

③Safariではページ読み込み時にもpopstateイベントが発火する

Safari（と古いChromeバージョン）ではページ読み込み時にもpopstateイベントが発火するようです。

https://developer.mozilla.org/ja/docs/Web/API/Window/popstate_event

そのため、ブラウザバック時にbfcacheからpopstateイベントの残ったページが読み込まれ、読み込み時にpopstateイベントが発火していたようです。

popstateイベントの代わりに、VueRouterの beforeRouteLeave を使用します。

beforeRouteLeaveは、ブラウザバックやVueRouterで前のページに戻る際に発火するナビゲーションガードです。beforedestroyより先に発火するので、ブラウザバック直前の確認処理などに利用できます。

上記のコードでは戻る時にダイアログでの確認を行い、OKなら処理続行、NGなら戻る処理を中断させます。

これでSafariやChromeなどの環境に左右されず、ブラウザバック時にのみ正常に動作するようになりました。

複数の原因が重なっていて、原因解明まで非常に沼にハマってました。

結果的にはbeforeRouteLeaveを使っていれば早かったのですが、諸々の勉強になってよかったです。

popstateが軽くトラウマになった

RELATED ARTICLE

Nuxt3とVuetifyでドラッグスクロールを実装してみた

【Nuxt 3】 Lottieを使ってリッチなアニメーションを表示（オープニング・ボタンアニメーション）

【Nuxt3】NitroでHTMLファイルを返してみた

【Nuxt3】ページ遷移アニメーションの実装について（View Transitions API編）

【Nuxt3】ページ遷移アニメーションの実装について（CSS, JS/GSAP編）

【Nuxt3】権限ごとのページアクセスの制御について（ページごと権限付与・ミドルウェア実装編）

Naoki Karita

主にバックエンド担当。Shopifyも勉強中。

最新記事 by Naoki Karita 全て見る

【VSCode】Prettierの使い方＆おすすめ設定を紹介

絶対に行きたい！【札幌駅】おすすめランチ13選

Nuxt.jsでaxiosの使い方と設定方法を紹介

【Nuxt.js】新規プロジェクトからScss周りの環境構築（Node v16対応）

【Cognito】メールで多要素認証（MFA）する方法

【札幌カレー】I’m Spice アイムスパイス

【クルーインタビュー】大森さん編

VitePressとは？基本的な使い方、デプロイ手順を解説します！

AWS Startup Loft Tokyoに行ってみました！