diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 8c9d8bc34631a..0426774e80d46 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -860,7 +860,8 @@ function loadCss(cssUrl) {
         wrapper.style.top = (pos.top + window.scrollY) + "px";
         wrapper.style.left = (pos.left + window.scrollX) + "px";
         wrapper.style.width = pos.width + "px";
-        document.documentElement.appendChild(wrapper);
+        const body = document.getElementsByTagName("body")[0];
+        body.appendChild(wrapper);
         window.CURRENT_NOTABLE_ELEMENT = wrapper;
         window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
         wrapper.onpointerleave = function(ev) {
@@ -877,7 +878,8 @@ function loadCss(cssUrl) {
     function hideNotable() {
         if (window.CURRENT_NOTABLE_ELEMENT) {
             window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
-            document.documentElement.removeChild(window.CURRENT_NOTABLE_ELEMENT);
+            const body = document.getElementsByTagName("body")[0];
+            body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
             window.CURRENT_NOTABLE_ELEMENT = null;
         }
     }
diff --git a/src/test/rustdoc-gui/notable-trait.goml b/src/test/rustdoc-gui/notable-trait.goml
index 81d381ed1262d..d8261d8dc902c 100644
--- a/src/test/rustdoc-gui/notable-trait.goml
+++ b/src/test/rustdoc-gui/notable-trait.goml
@@ -137,3 +137,76 @@ compare-elements-position-false: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
     ("y", "x"),
 )
+
+// Now check the colors.
+define-function: (
+    "check-colors",
+    (theme, header_color, content_color, type_color, trait_color),
+    [
+        ("goto", "file://" + |DOC_PATH| + "/test_docs/struct.NotableStructWithLongName.html"),
+        // This is needed to ensure that the text color is computed.
+        ("show-text", true),
+
+        // Setting the theme.
+        ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
+        // We reload the page so the local storage settings are being used.
+        ("reload"),
+
+        ("move-cursor-to", "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"),
+        ("assert-count", (".notable-traits-tooltiptext", 1)),
+
+        ("assert-css", (
+             ".notable-traits-tooltiptext h3.notable",
+             {"color": |header_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content",
+             {"color": |content_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content a.struct",
+             {"color": |type_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content a.trait",
+             {"color": |trait_color|},
+             ALL,
+        )),
+    ]
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "content_color": "rgb(230, 225, 207)",
+        "header_color": "rgb(255, 255, 255)",
+        "type_color": "rgb(255, 160, 165)",
+        "trait_color": "rgb(57, 175, 215)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "content_color": "rgb(221, 221, 221)",
+        "header_color": "rgb(221, 221, 221)",
+        "type_color": "rgb(45, 191, 184)",
+        "trait_color": "rgb(183, 140, 242)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "content_color": "rgb(0, 0, 0)",
+        "header_color": "rgb(0, 0, 0)",
+        "type_color": "rgb(173, 55, 138)",
+        "trait_color": "rgb(110, 79, 201)",
+    },
+)