Merge pull request #16794 from Snuffleupagus/CSS-round
Use the `round` CSS function in the `setLayerDimensions` helper function
This commit is contained in:
commit
de1f31aae8
@ -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;
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user