diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css index 447cb638d..feb2a8ac5 100644 --- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css +++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css @@ -16,8 +16,6 @@ .canvas { position: absolute; inset: 0 auto auto 0; - transform-origin: top left; - will-change: transform; /* * Keep dashboard UI at its normal readable density while the fixed canvas @@ -42,9 +40,3 @@ --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1)); --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1)); } - -@media (prefers-reduced-motion: reduce) { - .canvas { - will-change: auto; - } -} diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx index 5844a9bd8..b11356b93 100644 --- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx +++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx @@ -83,7 +83,7 @@ export const ScaledBoardCanvas = ({ style={{ "--board-canvas-inverse-scale": inverseScale, "--board-canvas-ui-scale": uiScale, - transform: `scale(${scale})`, + zoom: scale, }} > {children} diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts index a82685067..9f428b4f9 100644 --- a/e2e/board-grid.spec.ts +++ b/e2e/board-grid.spec.ts @@ -861,6 +861,9 @@ describe("Board grid", () => { return y >= 0 && y <= stickyRailY + 0.5; }) .toBe(true); + const scrolledRailY = (await expectBoundingBoxAsync(rail)).y; + await page.evaluate(() => window.scrollTo({ top: 600, behavior: "auto" })); + await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeCloseTo(scrolledRailY, 1); await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" })); await setDocumentZoomAsync(page, 1.25);