pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: fix dimensionless SVGs in media-dialog on firefox

Browse Source 
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) <qsm@odoo.com>
This commit is contained in:
Samuel Degueldre
2020-10-14 09:47:39 +00:00
parent 6ce289606f
commit 57154071c0
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+19 -1
View File
@@ -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`;