diff --git a/addons/web/static/src/legacy/js/widgets/colorpicker.js b/addons/web/static/src/legacy/js/widgets/colorpicker.js
index 2569ee30c84..57e57774e6e 100644
--- a/addons/web/static/src/legacy/js/widgets/colorpicker.js
+++ b/addons/web/static/src/legacy/js/widgets/colorpicker.js
@@ -78,20 +78,17 @@ var ColorpickerWidget = Widget.extend({
         });
         resizeObserver.observe(this.el);
 
-        // Needs to be bound on document to work in all possible cases.
-        const parent = this.getParent();
-        const $document = $(
-            parent.options.ownerDocument ||
-            (parent.el && parent.el.parentElement && parent.el.ownerDocument)
-            || (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
-            || document);
+        // Need to be bound on all documents to work in all possible cases (we
+        // have to be able to start dragging/moving from the colorpicker to
+        // anywhere on the screen, crossing iframes).
+        this.$documents = $([window.top, ...Array.from(window.top.frames)].map(w => w.document));
         this.throttleOnMouseMove = throttleForAnimation((ev) => {
             this._onMouseMovePicker(ev);
             this._onMouseMoveSlider(ev);
             this._onMouseMoveOpacitySlider(ev);
         });
-        $document.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
-        $document.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
+        this.$documents.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
+        this.$documents.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
             if (this.pickerFlag || this.sliderFlag || this.opacitySliderFlag) {
                 this._colorSelected();
             }
@@ -108,8 +105,8 @@ var ColorpickerWidget = Widget.extend({
      */
     destroy: function () {
         this._super.apply(this, arguments);
-        $(document).off(`.${this.uniqueId}`);
-        if (this.throttleOnMouseMove)  {
+        if (this.throttleOnMouseMove) {
+            this.$documents.off(`.${this.uniqueId}`);
             this.throttleOnMouseMove.cancel();
         }
     },