Prevent unwanted inputs in (iOS) Safari, hold click selects canvas

Questions
1

Hey,

when you do a hold click on iOS Safari it selects the whole canvas. You have to press outside the canvas to deselect it. Is there a way I can prevent certain imputs such as that, so the user doesn’t accidentally does that while dragging to look around.

I also noticed that on MacOS Safari the zooming has sometimes behaved really weird. As if you zoomed on the actual website and not inside the canvas with the camera. (Further tests required by me though, I just saw it over the shoulder once). But maybe it’s related and you can also block that input somehow.

Thanks and happy weekend :smiley:

2

Hi @Regit,
This is actually not directly related to BJS (others, correct me if I’m wrong). You can fix it (sort of) with css.
I’m saying “sort of” because iOS/Safari is kind of the most unfriendly piece of a browser. You could start with adding something like this to your CSS:

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
             -webkit-touch-callout: none;
             -webkit-user-select: none;
             -khtml-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
             outline: none;
             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            z-index: -1;

Have fun debugging mobile and don’t get desperate (we all are;)
Else, have a great weekend,

4 Likes
3

Hey @mawa, thanks for helping me with this.

Your css prevents me from selecting the canvas, but now it sometimes selects to the left side of it or tries to take a screenshot instead. Afterwards I can’t drag to rotate anymore, as it zooms instead. I have to do some double finger drag to get back the normal behaviour. I’m sadly not enough of a web developer to know if more and which css will do the trick here.

If anyone knows, much obliged.

4

Nevermind! I added the same css to html, body instead and that did the trick!
My bad for thinking it was the renderCanvas being selected I guess.
It now looks like this:

<style>
       html, body {
           overflow: hidden;
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
           touch-action: none;
           -webkit-touch-callout: none;
           -webkit-user-select: none;
           -khtml-user-select: none;
           -moz-user-select: none;
           -ms-user-select: none;
           user-select: none;
           outline: none;
       }

       #renderCanvas {
           width: 100%;
           height: 100%;
           touch-action: none;
       }
</style>

I tried the renderCanvas with and without the additional css and saw no difference, so I kept it out of there.
Also left out -webkit-tap-highlight-color: rgba(255, 255, 255, 0); z-index: -1; since it doesn’t make sense to me to have for html, body. Then again, I don’t really know what they do… :sweat_smile:

5

Oh Dears, sry, I believe this was fast typing (copy/paste) from a project of mine. I should have remove the id call and the other parts and bits specific to my case. :thinking:
Anyways, ’ glad to see that you figured it out for your use. In fact this is even better, because from now, I’m sure you’ll remember it and will apply it straight to your future projects;) Saying this, I feel like the Guy who’s looking for an escape for the rush posting :zipper_mouth_face:
Well, let’s just say I’m happy you got this so you now have time to investigate all of the other ‘faen’ issues that may occur with iOS/Safari… :dizzy_face: GL with your project && have a great day,