HTML5 HTML5 export - game window being 'selected' when moving player on iPad.

oldnoob

Member
Hello there,

I'm having an issue with the HTML5 version of my game when I run it via iPad Safari. I have on-screen controls and when I want to move my player left, the user keeps their finger on the left button (obvs, right?). However, this also has the effect of 'selecting' the entire game window within the browser page and giving it a blue selection shade like its waiting for you to copy/paste it!

Works fine on a PC browser, but that wasn't really the reason I bought the HTML5 export.

I can't think of a way around this as I assume its a tablet browser thing?

Any suggestions?



OldNoob
 

eimie

Member
Hi, this seems to be a problem of Safari (and maybe other browsers) for mobile devices and can be avoided via CSS. I found something in one of my older projects:
eimie's Storehouse Builder

(Right click to show the source will not work, because the canvas fills the entire window. So copy-paste this: view-source:https://www.eimie.de/storehousebuilder/ )

So try to add this code into the <head>-section of your HTML:

CSS:
canvas {
    touch-action: none;
}
 
Last edited:

oldnoob

Member
Hi, this seems to be a problem of Safari (and maybe other browsers) for mobile devices and can be avoided via CSS. I found something in one of my older projects:
eimie's Storehouse Builder

(Right click to show the source will not work, because the canvas fills the entire window. So copy-paste this: view-source:https://www.eimie.de/storehousebuilder/ )

So try to add this code into the <head>-section of your HTML:

CSS:
canvas {
    touch-action: none;
}
I’m still stuck. It seems the HTML export puts it in anyway, but I can’t get it to work!

looking at W3C it seems to suggest it only affects the pan and zoom ability. What I’m after is the long-touch selection process.

Any suggestions?
 

eimie

Member
Yeah, seems that the code didn't solve the problem for all browsers. :(

I found this on Stack Overflow:

HTML:
<style type="text/css">
    canvas {
        -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); /* mobile webkit */
    }   
</style>
This seems to work at least for Chrome and Safari.

Link: https://stackoverflow.com/questions/5796512/how-to-disable-select-for-html5-canvas-element
 

eimie

Member
That's the CSS for the canvas element:

CSS:
canvas {
                    image-rendering: optimizeSpeed;
                    -webkit-interpolation-mode: nearest-neighbor;
                    -ms-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); /* mobile webkit */
                    margin: 0px;
                    padding: 0px;
                    border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 100%;
                 height: 100%;
            }
 
Top