Streaming live at 10am (PST)

Delay in button response on iphone

Hello! My ecommerce project has a page called “Shop” and consists of a lot of products being displayed on that page. Every product has a “Shop Now” button redirecting to the corresponding product page. On iphone devices, the “Shop Now” button exhibits a delay: it needs to be tapped twice in order to redirect to the product page. On Android devices, however, it works totally fine.

Here is my site Read-Only: Webflow - Loox Eyewear Website

Please help if any solution is found.

If I wanted to test it on my iPhone where would I go?

You should head over to the burger menu and visit the Shop Page. Then while you’re in Shop Page, try and click on the “Shop Now” button on any of the products. It should lead you to the product page. But notice if you have to click twice on the Shop Now button.

iOS devices trigger the :hover pseudoclass styles before click events. The transition of your styles from the base class to the :hover pseudoclass is 200ms, which makes me think that by the time that finishes, the button is no longer being viewed as clicked or is being converted into a double-tap, and the link is not triggering.

Would you be able to try and remove the styles applied in the hover pseudoclass for your button? Primarily remove them on the Tablet breakpoint and smaller (devices where iOS would come into play). You may also need to remove the transitions on the base class.

If that doesn’t work, I might recommend disabling your mouse over interaction on the button. (Or at least disable it from triggering on mobile breakpoints)

@Drew_Schafer Tried both of your solutions, but unfortunately still have to click the Shop Now button twice to enter the product page.

You can check it yourself: Shop Now | Loox Eyewear