diff --git a/source/mode/hint.lisp b/source/mode/hint.lisp
index 585a8f62d86..5f7adc8b7e7 100644
--- a/source/mode/hint.lisp
+++ b/source/mode/hint.lisp
@@ -149,20 +149,24 @@ A positive value shifts to the bottom.")
       (set-hint-element-style hint-element hinted-element))
     hint-element)
 
-  (let ((hints-parent (ps:chain document (create-element "div")))
-        (hints (ps:lisp (list 'quote hints)))
-        (i 0))
+  (let* ((hints-parent (ps:chain document (create-element "div")))
+         (shadow (ps:chain hints-parent (attach-shadow (ps:create mode "open"))))
+         (hints (ps:lisp (list 'quote hints)))
+         (i 0))
     (dolist (hinted-element (nyxt/ps:qsa document "[nyxt-hintable]"))
       (let ((hint (aref hints i)))
         (ps:chain hinted-element (set-attribute "nyxt-hint" hint))
-        (ps:chain hints-parent (append-child (create-hint-overlay hinted-element hint)))
+        (ps:chain shadow (append-child (create-hint-overlay hinted-element hint)))
         (when (ps:lisp (show-hint-scope-p (find-submode 'hint-mode)))
           (ps:chain hinted-element class-list (add "nyxt-element-hint")))
         (setf i (1+ i))))
     (setf (ps:@ hints-parent id) "nyxt-hints"
           (ps:@ hints-parent style) "all: unset !important;")
-    (ps:chain document body parent-node (insert-before hints-parent
-                                                       (ps:@ document body next-sibling)))
+    ;; unless the hints root is a child of body, zooming the page breaks
+    ;; positioning.
+    ;; (ps:chain document body parent-node (insert-before hints-parent
+    ;;                                                    (ps:@ document body next-sibling)))
+    (ps:chain document body (append-child hints-parent))
     ;; Don't return a value.  Only the side-effects are of importance.
     nil))
 
@@ -202,6 +206,8 @@ A positive value shifts to the bottom.")
     (ps:chain element (remove-attribute "nyxt-hintable"))))
 
 (defun add-hints (&key selector (buffer (current-buffer)))
+  ;; must be added in the shadow dom
+  ;; see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#applying_styles_inside_the_shadow_dom
   (add-stylesheet "nyxt-hint-stylesheet"
                   (style (find-submode 'hint-mode))
                   buffer)