Interaction (show modal on tap) malfunctioning on iPad landscape

Design help Animations & Interactions
#1

Hey there,

I am getting desperate with this site I am working on at the moment. I have a map on the web where there are pins you can click. When you click the pin, a modal appears and when you click the cross icon inside the modal or outside of the modal, it closes. It works well on a desktop. On mobile, I disabled this interactivity and the modals are just listed in the grid as the map is too small on mobile to be interactive.

However! On iPad in landscape mode, it behaves as it is a desktop which would be fine BUT the interaction (tap the pin to open the modal) works only like one out of five times you tap the pin. Any idea how to solve it?

Thanks,
Zmaslo

Here is my public share link: LINK
(how to access public share link)

#2

Hi @Filip_Cerny ,
Can you share a link to the live site?

I think that the problem is that the pins are very small, and taping on them is tricky.

1 Like
#3

Sure there its: https://www.complexre.eu/ However, I don’t think that is the case, since the hover responds every time you tap it (so I know the tap was “executed”)

#4

Ahh yea… you are right!
And that’s the problem actually! Since the element has a “hover” state, and there’s no hover state on mobile, the first tap is mimicking hover.

Remove the hover state on the pins and leave only click interactions. I believe it will solve it

#5

Unfortunately, removing hover states didn’t help. :confused: However, I find out, that the interaction works if you zoom in the whole page a little on the iPad… no idea what it means though. :smiley:

#6

Can you try disabling hover on children elements as well?