Bug 212839

Summary: history.replaceState(..) results in title being removed from history entry
Product: WebKit Reporter: Jimmy Thomsen <jimmy>
Component: HistoryAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: achristensen, beidson, cdumez, ddkilzer, jimmy, thorton, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: Mac   
OS: macOS 10.14   
Attachments:
Description Flags
Code sample useful for reproducing the bug none

Jimmy Thomsen
Reported 2020-06-05 12:02:15 PDT
Created attachment 401179 [details] Code sample useful for reproducing the bug Please see attached sample demonstrating the bug. Make sure test2.html is loaded from an HTTP server - it won't work from file:// 1) Load test2.html from an HTTP server 2) Click About and Contact Us in the menu 3) Long-click on the Back button in Safari. Notice how none of the history items have any titles (see Screenshot-bug.png) Now disable the code triggering the bug (see Screenshot-code.png) and re-run the test. Notice how all history entries have titles now (see Screenshot-working.png). This is a major annoyance when working with Single Page Applications and routing. Being able to update state associated with the current page, e.g. before "navigating" to the next page as in my example, makes perfect sense. Losing the context information the title provides will confuse many users. The sample works fine in latest Chrome, latest Firefox, latest Edge based on Chromium, old MS Edge, and IE11. The sample fails on Safari 13.1, 12.1, and 11.1.
Attachments
Code sample useful for reproducing the bug (1.01 MB, application/zip)
2020-06-05 12:02 PDT, Jimmy Thomsen 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jimmy Thomsen
Comment 1 2020-06-05 12:12:29 PDT
It is worth mentioning that the call to history.replaceState(..) can happen any time to trigger this bug, not just immediately prior to calling history.pushState(..). However, once history.pushState(..) is called, Safari returns to a sane state where titles are properly stored in history, until history.replaceState(..) is called again.
Jimmy Thomsen
Comment 2 2020-06-05 12:40:51 PDT
Safari Technology Preview for macOS Mojave (release 107 - May 28, 2020) also contains the bug.
Radar WebKit Bug Importer
Comment 3 2020-06-05 13:42:51 PDT
<rdar://problem/64042952>
Brady Eidson
Comment 4 2020-06-05 18:12:55 PDT
Your example code passes "" for the title. That clears the explicit title on the history entry. I notice when you do pushState, you (correctly?) pass the document.title. Do you expect passing an empty string to the title argument in replaceState to *not* clear the title? Unless I'm missing something here, this is working as expected.
Chris Dumez
Comment 5 2020-06-05 18:21:27 PDT
(In reply to Brady Eidson from comment #4) > Your example code passes "" for the title. > > That clears the explicit title on the history entry. > > I notice when you do pushState, you (correctly?) pass the document.title. > > Do you expect passing an empty string to the title argument in replaceState > to *not* clear the title? > > Unless I'm missing something here, this is working as expected. The bug report states it works correctly in other browsers though. Why are we closing?
Jimmy Thomsen
Comment 6 2020-06-06 11:45:57 PDT
I'm sorry. It seems that I by accident attached the wrong version of test2.html. My intention was actually to have the title argument set to an empty string for both pushState and replaceState. Never the less, it sure does work if the title argument is provided for both functions, and I now realize that contrary to all other browsers, Safari/WebKit uses the title argument, which is why it works in all other browsers except Safari. Working version of test2.html: <!DOCTYPE html> <html> <head> <title>Front page</title> </head> <body> <!-- Menu - navigation --> <a href="javascript:window.nav('frontpage');">Front page</a> | <a href="javascript:window.nav('about');">About</a> | <a href="javascript:window.nav('contact');">Contact us</a> <script> window.nav = function(pageId) { var page = document.querySelector("#" + pageId); if (page) { // Hide page currently visible (window.curPage || document.querySelector("#frontpage")).style.display = "none"; window.curPage = page; // Add navigatedAway property to page's current state. Safari bug: // History entry will now lose its title, causing the back button // pulldown menu to only reveal URLs, rather than document titles. var changedState = history.state || {}; changedState.navigatedAway = new Date(); history.replaceState(changedState, document.title, location.href); // "Navigate" to new page (update URL and display page) history.pushState({}, page.title, pageId); page.style.display = "block"; document.title = page.title; } } </script> <!-- Website content - pages --> <div id="content" style="border: 1px solid silver; margin: 1em; padding: 1em;"> <!-- Front page --> <div id="frontpage" title="Front page" style="display: block"> Welcome to the front page </div> <!-- About page --> <div id="about" title="About us" style="display: none"> So, our company is all about... </div> <!-- Contact page --> <div id="contact" title="Contact us" style="display: none"> Please fill out the contact form below to reach us..<br><br> Your name<br> <input><br><br> Your e-mail address<br> <input><br><br> <button>Send</button> </div> </div> </body> </html>
Note You need to log in before you can comment on or make changes to this bug.