diff --git a/src/core/drive/page_renderer.js b/src/core/drive/page_renderer.js
index d9c78e5ac..76072638f 100644
--- a/src/core/drive/page_renderer.js
+++ b/src/core/drive/page_renderer.js
@@ -1,6 +1,5 @@
 import { activateScriptElement, waitForLoad } from "../../util"
 import { Renderer } from "../renderer"
-import { ProgressBarID } from "./progress_bar"
 
 export class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
@@ -184,7 +183,13 @@ export class PageRenderer extends Renderer {
   }
 
   get unusedHeadStylesheetElements() {
-    return this.oldHeadStylesheetElements.filter((element) => element.id !== ProgressBarID)
+    return this.oldHeadStylesheetElements.filter((element) => {
+      return !(element.hasAttribute("data-turbo-permanent") ||
+        // Trix dynamically adds styles to the head that we want to keep around which have a
+        // `data-page-name` attribute. Long term we should moves those styles to Trix's CSS file
+        // but for now we'll just skip removing them
+        element.hasAttribute("data-page-name"))
+    })
   }
 
   get oldHeadStylesheetElements() {
diff --git a/src/core/drive/progress_bar.js b/src/core/drive/progress_bar.js
index bd0f6958b..8ce398ca4 100644
--- a/src/core/drive/progress_bar.js
+++ b/src/core/drive/progress_bar.js
@@ -107,6 +107,7 @@ export class ProgressBar {
   createStylesheetElement() {
     const element = document.createElement("style")
     element.id = ProgressBarID
+    element.setAttribute("data-turbo-permanent", "")
     element.type = "text/css"
     element.textContent = ProgressBar.defaultCSS
     if (this.cspNonce) {
diff --git a/src/tests/functional/drive_stylesheet_merging_tests.js b/src/tests/functional/drive_stylesheet_merging_tests.js
index c51e7421e..6e38c2d82 100644
--- a/src/tests/functional/drive_stylesheet_merging_tests.js
+++ b/src/tests/functional/drive_stylesheet_merging_tests.js
@@ -7,9 +7,12 @@ test.beforeEach(async ({ page }) => {
 })
 
 test("navigating removes unused style elements", async ({ page }) => {
+  assert.ok(await hasSelector(page, 'style[id="turbo-progress-bar"]'))
+
   await page.locator("#go-right").click()
   await nextBody(page)
 
+  assert.ok(await hasSelector(page, 'style[id="turbo-progress-bar"]'))
   assert.ok(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/common.css"]'))
   assert.ok(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/right.css"]'))
   assert.notOk(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/left.css"]'))