From 0665bce6d8dacc2e547fadc42efd17338f2d56dc Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Wed, 19 Apr 2023 11:57:38 +0000 Subject: [PATCH] [FIX] web_editor: fix border width options on zoomed browser When the browser is zoomed, the value of the `border-width` CSS properties obtained through `getComputedStyle` are impacted by the zoom. Because of this, entering a "10px" border in a Chrome zoomed at 125% turns it into "9.6px" when leaving the input field. This commit neutralizes the zoom effect by rounding the value up. The rounding operation was empirically determined by observing values, see table below. When zoomed out this does not always work: e.g. at 50% zoom, a value of 11px becomes 10px. But zooming out is an unxpected use case, that situation is therefore not handled by this fix. Observed values of the border-width property: Set value => `getComputedStyle` ``` Value Chrome 125% Firefox 120% 1px 0.8px 0.83333px 2px 1.6px 1.66667px 3px 2.4px 2.50000px 4px 4.0px 3.33333px 5px 4.8px 5.00000px 6px 5.6px 5.83333px 7px 6.4px 6.66667px 8px 8.0px 7.50000px 9px 8.8px 8.33333px 10px 9.6px 10.00000px 11px 10.4px 10.83333px 12px 12.0px 11.66667px ``` Steps to reproduce: - Drop a "Text - Image" block. - Select the text column. - Zoom with ctrl+mouse wheel or ctrl-plus. - Set a 10px border. - Leave input field. => Border option field displayed a different size. task-3172235 closes odoo/odoo#125107 X-original-commit: 6398b0c75b9e14b7cecb1526fe5a950101d534ad Signed-off-by: Quentin Smetz (qsm) Signed-off-by: Benoit Socias (bso) --- addons/web_editor/static/src/js/editor/snippets.options.js | 6 ++++++ 1 file changed, 6 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 85895f88da9..007741226b8 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -3857,6 +3857,7 @@ const SnippetOptionWidget = Widget.extend({ } const cssProps = weUtils.CSS_SHORTHANDS[params.cssProperty] || [params.cssProperty]; + const borderWidthCssProps = weUtils.CSS_SHORTHANDS['border-width']; const cssValues = cssProps.map(cssProp => { let value = styles.getPropertyValue(cssProp).trim(); if (cssProp === 'box-shadow') { @@ -3866,6 +3867,11 @@ const SnippetOptionWidget = Widget.extend({ values = values.join(' ').replace(color, '').trim(); value = `${color} ${values}${inset ? ' inset' : ''}`; } + if (borderWidthCssProps.includes(cssProp) && value.endsWith('px')) { + // Rounding value up avoids zoom-in issues. + // Zoom-out issues are not an expected use case. + value = `${Math.ceil(parseFloat(value))}px`; + } return value; }); if (cssValues.length === 4 && weUtils.areCssValuesEqual(cssValues[3], cssValues[1], params.cssProperty, this.$target)) {