Menu
I am struggling to debug the issue here. Until a react-select is shown on the UI the feedback on mobile touch elements do not provide feedback on touch.
This can be seen here by completing the journey on mobile until step 4: https://odd-panda-design.badgerbookings.com/booking
When you first interact with the elements there is no feedback however when you get to the 4th screen in the journey and click "signup" (showing the react select) the hover elements suddenly provide feedback if you navigate back to them. This issue is only on mobile and not web. I have tested on iPhone 6 using Chrome.
Below is the react-select element that triggers the touch feedback interactions.
I have tried adding onTouchStart and changing the hover elements to include :active or :focus
I am not sure if this is a react or javascript issue
226
Hover effects inform users what they can interact with by providing visual feedback on buttons. But there's a problem — hover effects are for desktop apps, not mobile apps. There are no mouse devices on mobile, so users don't have the luxury of using hover effects.
Mobile devices use touch screen, which reacts only to touch, so there is no hover. Systems vary, on some a first touch is considered a hover and the second a click, but on many a touch is a click. You cannot rely on hover for mobile devices.
I had dealt with this before.
Try adding onclick="" to any element that requires ios to recognize as hover element.
As a side note, try abstracting the problem. Remove react select and see if it works, if not, continue abstracting and see when the problem disappears.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
