All answers here which mention scrollHeight/scrollWidth should be adjusted a bit to take body margins into account. Browsers apply default nonzero margins for documents' body element (and it's also applicable to content loaded into frames). The working solution I found is to add this: parseInt(window.getComputedStyle(this.contentDocument.body).margin.

Bureaucrat doesn't define save

Now let me ask you, do you write JS for a single page application differently from a "traditional" web application? I sure hope you do! In a "traditional" application, you can get away with being sloppy because every time the user navigates to a new page, their browser destroys the DOM and the JavaScript context. SPAs, though, require a more thoughtful approach.

where's the code that unloads the table-sorter plugin when the page unloads? There isn't any. There didn't need to be back in the day because the browser handled the cleanup. However, in a single-page application like Turbolinks, the browser doesn't handle it. You, the developer, have to manage initialization and cleanup of your JavaScript behaviors.

When people try to port traditional web apps to Turbolinks, they often run into problems because their JS never cleans up after itself.

All Turbolinks-friendly JavaScript needs to: Initialize itself when a page is displayed Clean up after itself before Turbolinks navigates to a new page.

"Headless Tippy" refers to Tippy without any of the default element rendering or CSS. This allows you to create your own element from scratch and use Tippy for its logic only.

(Note that you're responsible for handling any race conditions that arise as a result of the component being destroyed before the promise resolves, though assigning state inside a destroyed component is harmless.)