Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

7.16.8

Node.js Version

v14.17.3

Mode

Standalone Mode

Which capabilities are you using?

{
    browserName: 'chrome' // 'firefox'
}

What happened?

Method isDisplayed returns different values in chrome and firefox for elements with zero opacity and not empty content:

<div id="zeroOpacity" style="opacity: 0">hi</div>

isDisplayed returns false in chrome and true in firefox.

What is your expected behavior?

isDisplayed should return the same value for both browsers and this value should be true (according to spec), because element with zero opacity and not empty content affects layout (getBoundingClientRect().height for the element returns non zero value).

How to reproduce the bug.

• firefox and chrome installed
• create file index.html and serve it with some static server on 9000 port:

<div id="zeroOpacity" style="opacity: 0">hi</div>

• Run selenium-standalone on 4444 port
• Create file index.js:

const webdriverio = require('webdriverio');

(async () => {
    const browser = await webdriverio.remote({
        prootcol: "http",
        hostname: "localhost",
        port: 4444,
        path: "/wd/hub",
        capabilities: {
            browserName: process.env.BROWSER_NAME || 'chrome'
        },
        baseUrl: "http://localhost:9000",
        logLevel: 'error'
    });

    await browser.url('/index.html');

    const elem = await browser.$("#zeroOpacity");
    console.log(await elem.isDisplayed());

    await browser.deleteSession();
})();

• Run in chrome:

BROWSER_NAME=chrome node index.js # logs `false`

• Run in firefox:

BROWSER_NAME=chrome node index.js # logs `true`

Relevant log output

false

in chrome

true

in firefox

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