Canvas/Body gets selected on single tap on pickable

Questions
#1

Hello,

this problem is rather specific. It only happens on one of the tested android phone. When you single tap on something that’s pickable it selects the whole canvas (or maybe more likely the whole body?) as shown here:

unknown
unknown1080×2240 231 KB

The pickables were planes and cubes. Both acting the same.

On another phone there was this selection happening on long hold tap, but that wasn’t reproducable consistently and didn’t seem to have anything to do with stuff being pickable or not.

A single tap is not supposed to do anything. I’m actually using double clicks for these pickables.

What could be a workaround here, or is there any css that could be applied? I’m already disabling pretty much every selection in css for the body and canvas.

#2

Hi,

this is an odd behavior. There must be some css/event lsitener trick that will work here, the question is - what are you currently using, and what doesn’t work. Also - is this the same browser as on other devices you are testing? the latest version of it?

I assume you did, but - are touch actions disabled for the canvas element?

#3

Currently this is the css for html, body and the renderCanvas:

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;
    -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;
}

We also found out it only happens on Chrome. On Firefox the selection does not happen on that phone. And yes, both mentioned phones use the up to date and same Chrome version.

#4

My guy @saifshk17 fixed it by adding one line of css:

-webkit-tap-highlight-color: transparent;

to html, body.

It was the body being selected as expected, so you don’t need all that css in the renderCanvas.
Final css looks like this:

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;
    -webkit-tap-highlight-color: transparent;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
4 Likes
#5

Sorry I am being late to the party :frowning: cause we had a similar question recently Remove Border of rendering canvas - #3 by Marcelo_Eduardo

@PirateJC might be worth adding into the doc ?

1 Like