From 57154071c0df25edc518dbfd87a8e77397ab7e2d Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Tue, 6 Oct 2020 08:41:53 +0000 Subject: [PATCH] [FIX] web_editor: fix dimensionless SVGs in media-dialog on firefox Previously, dimensionless SVGs (SVGs with no intrinsic width or height) were rendered with a width of 0 in the media-dialog on firefox. This is caused by the fact that firefox reports a naturalWidth and naturalHeight of 0 for dimensionless images, which we were relying on to compute the image's aspect ratio. See: https://github.com/whatwg/html/issues/3510#issuecomment-369982529 for more details on the way browsers handle dimensionless images. This commit fixes that by giving the image a width, letting the browser render the image, and reading the height of the rendered image to compute the aspect ratio in the cases where the naturalHeight of the image is 0. task-2345120 closes odoo/odoo#59958 X-original-commit: 616c78e00e6d2760e1cf3425fc7247792f2ceb61 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/wysiwyg/widgets/media.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js index df8cd89bfc5..7127a3ae23d 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js @@ -904,7 +904,25 @@ var ImageWidget = FileWidget.extend({ console.error('CORS is misconfigured on the API server, image will be treated as non-dynamic.'); } } - const aspectRatio = img.naturalWidth / img.naturalHeight; + let aspectRatio = img.naturalWidth / img.naturalHeight; + // Special case for SVGs with no instrinsic sizes on firefox + // See https://github.com/whatwg/html/issues/3510#issuecomment-369982529 + if (img.naturalHeight === 0) { + img.width = 1000; + // Position fixed so that the image doesn't affect layout while rendering + img.style.position = 'fixed'; + // Make invisible so the image doesn't briefly appear on the screen + img.style.opacity = '0'; + // Image needs to be in the DOM for dimensions to be correct after render + const originalParent = img.parentElement; + document.body.appendChild(img); + + aspectRatio = img.width / img.height; + originalParent.appendChild(img); + img.removeAttribute('width'); + img.style.removeProperty('position'); + img.style.removeProperty('opacity'); + } const width = aspectRatio * this.MIN_ROW_HEIGHT; cell.style.flexGrow = width; cell.style.flexBasis = `${width}px`;