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.
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.