Icons don't work on mobile (iPhone)

[jis3r]

No description provided.

[imfenghuang]

get it. let me fix it.

[imfenghuang]

hi @jis3r , the icon div use mouseenter and mouseleave mouse event, however in iOS safari, the mouse event can't be triggered if the element is not a clickable element. So i set role='button' tableindex='0' to the div to make it act as a clickable element.(i tryed only set role='button', it didn't work).

doc: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

[jis3r]

Sounds good! I had a similar issue with my icons in the beginning, but interestingly, Svelte handles mouseenter as a klick somehow when on mobile. Maybe there is something similar for Vue? I just tested and SearchIcon for example works on mobile, because the animation gets only triggered initially on mouseenter and then plays. LayersIcon or FrameIcon however don't work as they have a persisting change when hovered (at least thats my guess)