Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

9.1.2

Node.js Version

20.17.0

Mode

Standalone Mode

Which capabilities are you using?

{
  browserName: "chrome"
}

What happened?

UI event doesn't work properly inside iframe scaled via css transform.

Complete reproduction is linked at the bottom. Short explanation is that, given these two html:

• index.html

      <div style="transform: scale(0.5); width: 400px; height: 400px; ">
        <iframe id="scaled" src="./other.html" style="width: 100%; height: 100%;"></iframe>
      </div>

• other.html

    <button onclick="console.log(`click inner!`)">
      Inner Button
    </button>

then, running a following script doesn't show click inner!:

    browser.on("log.entryAdded", (e) => { console.log(e) });
    await browser.switchToFrame(await browser.$("iframe#scaled"));
    await browser.$("button").click();

What is your expected behavior?

UI event works regardless of css transform

How to reproduce the bug.

Minimal reproduction with instructions can be found in https://github.com/hi-ogawa/reproductions/tree/main/webdriverio-css-transform

Relevant log output

$ node repro.mjs
[log.entryAdded] click inner! (normal)
[log.entryAdded] click outer! (normal)
[log.entryAdded] click outer! (scaled)

// here a following log is also expected
// [log.entryAdded] click inner! (scaled)

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