diff --git a/src/display/display_utils.js b/src/display/display_utils.js index 84b61c536..25c0ef816 100644 --- a/src/display/display_utils.js +++ b/src/display/display_utils.js @@ -967,6 +967,8 @@ function getCurrentTransformInverse(ctx) { return [a, b, c, d, e, f]; } +const useRound = globalThis.CSS?.supports?.("width: round(1.5px, 1px)"); + /** * @param {HTMLDivElement} div * @param {PageViewport} viewport @@ -983,14 +985,10 @@ function setLayerDimensions( const { pageWidth, pageHeight } = viewport.rawDims; const { style } = div; - // TODO: Investigate if it could be interesting to use the css round - // function (https://developer.mozilla.org/en-US/docs/Web/CSS/round): - // const widthStr = - // `round(down, var(--scale-factor) * ${pageWidth}px, 1px)`; - // const heightStr = - // `round(down, var(--scale-factor) * ${pageHeight}px, 1px)`; - const widthStr = `calc(var(--scale-factor) * ${pageWidth}px)`; - const heightStr = `calc(var(--scale-factor) * ${pageHeight}px)`; + const w = `var(--scale-factor) * ${pageWidth}px`, + h = `var(--scale-factor) * ${pageHeight}px`; + const widthStr = useRound ? `round(${w}, 1px)` : `calc(${w})`, + heightStr = useRound ? `round(${h}, 1px)` : `calc(${h})`; if (!mustFlip || viewport.rotation % 180 === 0) { style.width = widthStr; diff --git a/test/test.mjs b/test/test.mjs index 7d8825c8d..8df0d51d6 100644 --- a/test/test.mjs +++ b/test/test.mjs @@ -945,6 +945,8 @@ async function startBrowser(browserName, startUrl = "") { "gfx.offscreencanvas.enabled": true, // Disable gpu acceleration "gfx.canvas.accelerated": false, + // Enable the `round` CSS function. + "layout.css.round.enabled": true, }; }