From ccf8e8906f68d6d6a8d2bddcf643a377548e8230 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Fri, 26 Aug 2022 09:00:24 +0000 Subject: [PATCH] [FIX] web_editor: force Chrome to display image when it loses it In some situation, Chrome "loses" an already loaded lazy-loaded image when it is moved across nodes in the DOM. This typically happens when wrapping an image inside a link. Note that the DOM is actually correct: if the page is saved it then displays it correctly. This commit detects if this problem happens when adding a link on an image, and forces Chrome to re-display the image by re-specifying its `src` attribute. No alternative solution was found. Steps to reproduce: - Use a brand new incognito Chrome window. (Make sure you closed any previously opened incognito Chrome window before) - Drop a "Text - Image" snippet. - Save. - Edit. - Select image. - Press "CTRL+K". => The image was not displayed anymore. task-2962619 closes odoo/odoo#98889 Signed-off-by: Quentin Smetz (qsm) --- addons/web_editor/static/src/js/editor/snippets.options.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index a886d3bc5c5..f07bbfa813b 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -4837,6 +4837,13 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({ const wrapperEl = document.createElement('a'); this.$target[0].after(wrapperEl); wrapperEl.appendChild(this.$target[0]); + // TODO Remove when bug fixed in Chrome. + if (this.$target[0].getBoundingClientRect().width === 0) { + // Chrome lost lazy-loaded image => Force Chrome to display image. + const src = this.$target[0].src; + this.$target[0].src = ''; + this.$target[0].src = src; + } } else { parentEl.replaceWith(this.$target[0]); }