iOS safari shows zoom on longpress, is it possible to fix?

yoannmoinet / nipplejs

:video_game: A virtual joystick for touch capable interfaces.

https://yoannmoinet.github.io/nipplejs

MIT License

1.78k stars 185 forks source link

iOS safari shows zoom on longpress, is it possible to fix? #185

Open wvddrss opened 2 years ago

wvddrss commented 2 years ago

On iOS when I press long on the joystick, I get built-in zoom view. I don't know if this possbile to fix, after some googling tried

{ user-select: none }

But didnt work

Screenshots, Codepen or JSFiddle

Smartphone (please complete the following information):

Device: iphone 11
OS: ios 15.4
Browser: safari

Additional context Add any other context about the problem here.

Txori commented 2 years ago

Hi. Just add this noselect css class to the div that contains your nipple:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

(maybe this should be added directly to nipplejs source?)