Shadows theme Bug in mobile view on category page

[Jake Herbert]

I've raised a support ticket, but thought I'd share it here too.

Basically when in a category view on a mobile device when you **Sometimes** click on the first or second product on the left hand side rather than go to the product page it applies a facet filter rather than go to the product page which is obviously very confusing and a bug.

We can see this on I phone and Android devices. Also same problem on desktop when you reduce the window width to make it 2 column across (Mobile view)

For example:

https://shadows.mivareadythemes.com/sub-category-1.html

Visit that on mobile view then click on the Number 5 Product, or Number 7. Sometimes it does one thing sometimes another.

In fact as you move around the image the cursor behavior changes so you can see it easily. Where it lines up with where the facet filters would be **if expanded**, then it changes behavior.

Just a heads up, I'll update when it's resolved by support.



Thanks

[Matt Zimmermann]

Hi Jake,

Interesting bug, thank you for posting it. I'll check it out and get some answers.

[Matt Zimmermann]

Hi Jake,

Looks like it's an issue with the invisible content overflowing into the visible content causing a conflict in the click regions. To correct this, you should be able to modify the following classes in the User Interface -> CSS Resources -> x-category-tree:

    .x-category-tree__trigger:checked ~ .x-category-tree__row,
    .x-category-tree__trigger:checked ~ .x-category-tree__row .x-category-tree__row {
        max-height: 100%;
        opacity: 1;
        overflow: visible;
        visibility: visible;
    }

.........

    .x-category-tree__row {
        width: 100%;
        max-height: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.2s ease-in-out;
    }

.........

[Jake Herbert]

Hi Matt,

OK that works, thank you!

Regards

Jake