diff --git a/src/scss/tabulator.scss b/src/scss/tabulator.scss index 0eb30ecc1..e06e68851 100644 --- a/src/scss/tabulator.scss +++ b/src/scss/tabulator.scss @@ -440,6 +440,7 @@ $rangeHeaderTextHighlightBackground: #000000 !default; //header text color when width:100%; white-space: nowrap; overflow:auto; + overflow-anchor: none; -webkit-overflow-scrolling: touch; &:focus{ diff --git a/test/e2e/overflow-anchor.spec.ts b/test/e2e/overflow-anchor.spec.ts new file mode 100644 index 000000000..7c4623fd7 --- /dev/null +++ b/test/e2e/overflow-anchor.spec.ts @@ -0,0 +1,21 @@ +import { test, expect } from "@playwright/test"; +import { join } from "path"; + +// Regression coverage for disabling browser scroll anchoring on the table +// holder. The virtual renderer manages scrollTop/padding itself; Chrome's +// scroll anchoring double-compensates when rows are inserted above the +// viewport, causing drift on scroll-up. The fix sets overflow-anchor:none on +// .tabulator-tableholder. This guards that the rule survives in the built CSS +// and is applied by the browser. +test.describe("table holder disables browser scroll anchoring", () => { + test("computed overflow-anchor is none", async ({ page }) => { + await page.goto(`file://${join(__dirname, "scroll-jump.html")}`); + await page.waitForSelector(".tabulator-tableholder"); + + const value = await page + .locator(".tabulator-tableholder") + .evaluate((el) => getComputedStyle(el).overflowAnchor); + + expect(value).toBe("none"); + }); +});