Skip to content

[BUG] firefox's node.scrollIntoView({behavior: 'instant'}) is not instant :( #1552

@aslushnikov

Description

@aslushnikov

This is investigation for the failing firefox test:

it.fail(FFOX)('should work', async({page, server}) => {

  1. Looks like Firefox doesn't support 'instant' behavior in scrollIntoView() argument.
  2. It was noticed before: https://bugzilla.mozilla.org/show_bug.cgi?id=1570605

The following snippet demonstrates that window.scrollTo(0, 0) doesn't actually scroll to (0, 0).. And the element.scrollIntoView() command continues working after we scroll window.

const {firefox, chromium} = require('.');

(async() => {
  const browser = await firefox.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent(`
    <style>
      * {
        margin: 0;
        padding: 0;
        position: absolute;
      }

      body, html {
        width: 100%;
        height: 100%;
      }

      button {
        width: 100px;
        height: 20px;
        right: -20px;
        top: 50px;
      }
    </style>
    <button>yo</button>
  `);

  console.log(await page.evaluate(async () => {
    const measures = [];
    document.querySelector('button').scrollIntoView({behavior: 'auto'});
    measures.push({
      'window.scrollX': window.scrollX,
      'window.scrollY': window.scrollY,
    });
    await new Promise(x => setTimeout(x, 30));
    window.scrollTo(0, 0);
    measures.push({
      'window.scrollX': window.scrollX,
      'window.scrollY': window.scrollY,
    });
    for (let i = 0; i < 15; ++i) {
      await new Promise(x => requestAnimationFrame(x));
      //await new Promise(x => setTimeout(x, 30));
      measures.push({
        'window.scrollX': window.scrollX,
        'window.scrollY': window.scrollY,
      });
    }
    return measures;
  }));
  await browser.close();
})();

Compare output results between Chromium and Firefox browsers. On Chromium, all measurements after window.scrollTo(0, 0) end up to be (0, 0). On Firefox, they return to (20, 0) for me.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions