#StackBounty: #google-chrome #webdriver-io Getting an error element not interactable: element has zero size only in chrome browser

Bounty: 50

I have been getting this error only in chrome browser:

element not interactable: element has zero size (Session info: chrome=84.0.4147.105)

when I try to click on <a href="/cart" class="button--counter header__mini-basket" ...></a>.

This is the snippet from my DOM:

    <nav class="header__navigation">
    <div class="user-section">
    <ul class="user-section__list">
        <li class="user-section__item user-section__item-my-account js-my-account">
            My account<ul class="dropdown dropdown__my-account-desktop">
                <li>
                    <div class="spacer"></div>
                </li>
                <li>
                    <div class="arrow-up"></div>
                </li>

                <li>
                    <a href="/my-account" role="button" class="my-account__link button button--inverse atm-nav-account" title="My account details">
                    My account details</a>
                </li>

                <li>
                    <a href="/logout" class="logout__link button button--inverse atm-nav-logout" role="button" title="Log out ">
                    Log out</a>
                </li>

            </ul>

        </li>

        <li class="user-section__item">
            <a href="/wishlist" class="header__my-wishlist-link atm-nav-wishlist" title="Wishlist">
            Wishlist</a>
        </li>

        <li class="user-section__item dropdown">
            <a href="/cart" class="button--counter header__mini-basket" data-toggle="dropdown" data-close-on-bounce="false" data-toggle-status="closed" data-toggle-has-overlay="">
                <span class="counter-bubble">
                    <span class="counter-bubble__quantity">
                        <span class="cart-counter-wrapper" style="display: inline;">
                            <span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span>
                        </span>
                        <span data-counter-type="cart-title">
                            My cart</span>
                    </span>
                </span>
            </a>


    <div class="my-account__background-overlay js-account-background-overlay display-none"></div>
</div>
</nav>  

I have tried locating the element in different ways:

li.user-section__item a.header__mini-basket
ul.user-section__list a.header__mini-basket
div.user-section a.header__mini-basket
nav.header__navigation a.header__mini-basket  

but nothing helped.

This is what I have in the test:

    clickOnMiniBasketIcon(){
    this.cartIcon.waitForExist(TIMEOUT_5000_MS);
    this.cartIcon.waitForDisplayed(TIMEOUT_5000_MS);
    this.cartIcon.waitForEnabled(TIMEOUT_5000_MS);
    this.cartIcon.scrollIntoView({block: "center"});
    this.cartIcon.waitForClickable({timeout: TIMEOUT_3000_MS});
    this.cartIcon.click();
}

I am using webdriverio 5 and cucumber.

Interesting point is that running the test against firefox is passing just fine (headless or non headless version) but in chrome (headless or non headless) I get this error.
Also I have to mention that the test resizes window to mock mobile/responsiveness with the command:
browser.setWindowSize(300, 700);

Does anybody have any idea how to resolve this for chrome? Anybody had similar issue?
Any kind of help is very much appreciated.
Thanks!

---

Get this bounty!!!