webdriverio: [🐛 Bug]: Scroll Into View issues with scrolling to an element

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

8.3.9

Node.js Version

18.12.1

Mode

WDIO Testrunner

Which capabilities are you using?

This is happening on all capabilities I've tried - chrome, firefox and safari latest and older versions through browserstack so don't believe it matters

What happened?

We have recently updated from version 7.26 to 8.3.9 and noticed a number of issues where our tests are scrolling elements in to view

When scrolling in to view an element on a page, when the element is near the top of the page, or above the currently displayed part of the website, webdriver appears to scroll down taking the element out of view instead.

See attached video and code to reproduce below. There are two scrolls in each test, the element used in all cases is //h3[text()="Get Started With WebdriverIO within Seconds"]

The first test, I scroll to it normally and it works (although the scroll puts it behind the navbar at the top of the page). Then I scroll with the options {block: "center"}, which should put the element in the middle of the page (scrolling up from where we are) however it instead scrolls down so that the “Watch talks about webdriver io” is displayed at the top of the page, which is below the element I want. The element I want is then further out of view above the visible part of the page.

The page reloads for the second test and I use scrollIntoView with {block: "center"} first, which works ok and the element I want is in the middle of the page. I then scroll again to that element without using {block: "center"} and once again it sends is up above the visible area of the page so that I’m looking at the “Watch talks about webdriver io” bit, with the element I want to be in view well above the top of the page.

Video taken from browserstack https://user-images.githubusercontent.com/46672685/220308880-15a032c5-26f7-48a4-867c-f0c697e5d2ba.mp4

What is your expected behavior?

When calling scroll in to view with any options, the element should be scroll in to view correctly. Using this without any options should have it show at the top of the page, using it with {block: "center"} should show it in the middle of the page

How to reproduce the bug.

describe(“scrolling tests”, () => { it(“scroll testing 1”, async () => { await browser.url(“https://webdriver.io/”); await browser.maximizeWindow(); await browser.pause(5000); const element = await $( “//h3[text()=“Get Started With WebdriverIO within Seconds”]” ); await element.scrollIntoView(); await browser.pause(5000); await element.scrollIntoView({ block: “center” }); await browser.pause(5000); });

it(“scroll testing 2”, async () => { await browser.url(“https://webdriver.io/”); await browser.pause(5000); const element = await $( “//h3[text()=“Get Started With WebdriverIO within Seconds”]” ); await element.scrollIntoView({ block: “center” }); await browser.pause(5000); await element.scrollIntoView(); await browser.pause(5000); }); });

Relevant log output

na

Code of Conduct

• I agree to follow this project’s Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues