Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Having trouble figuring out how to disable the highlighting features on mobile browser #2217

Open
andrewandrepowell opened this issue Feb 16, 2025 · 5 comments
Open

Having trouble figuring out how to disable the highlighting features on mobile browser #2217

andrewandrepowell opened this issue Feb 16, 2025 · 5 comments

Comments

@andrewandrepowell
Copy link

The player must repeatedly tap the screen in my current game, but doing so activates the highlighting feature over the whole game window and opens up the copy menu. This happens for both Safari and Chrome.

I've tried creating the following CSS file...

.prevent-select {
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

...and adding a reference to it in the index.html body like so.

<body>
    <link href="css/utility.css" rel="stylesheet" />
    <div id="app">
        <div id="loading" style="display: table-cell; margin: auto; width:100vw; height:100vh; vertical-align: middle; background: #ffcc10;">
            <div style="display: block; margin: auto; width: 9em; color: white;font-family: 'Segoe UI', sans-serif;">
                <div style="text-align: center; font-size: 0.85em;">Made with<br /><a href="https://github.com/kniEngine/kni"><img src="kni.png" border="0" alt="Kni"></a></div>
                <div style="text-align: center; font-size: 1.8em;">loading&nbsp;<marquee style="width:0.9em; vertical-align: bottom;">.&nbsp;.&nbsp;.&nbsp;&nbsp;&nbsp;</marquee></div>
            </div>
        </div>
    </div>
    ...

It would also be nice to see this solution permanently in the KNI BlazorGL template since I can't imagine any reason why anyone would want the highlighting feature enabled by default.

Still on v3.14.9001, by the way. Haven't switched to 4.0.9001.1 yet.

Thanks in advance!
@vchelaru
Copy link

vchelaru commented Feb 17, 2025 •
edited
Loading

I'd really like to see this fixed, so I threw a small donation your way :D

Image

@nkast
Copy link

nkast commented Feb 19, 2025

I've tried the following page on my android with Chrome & Firefox.
https://kniengine.github.io/XNAGameStudio/wasm/Ship-Game/index.html

I tried to bring up the clipboard options (Copy, Cut, ...) by double tapping and holding.
It didn't work and I don't seem to be able to replicate the issue.
Additionally the touch events call .preventDefault(), which should disable things like the context menu and selection.
https://github.com/nkast/Wasm/blob/main/Wasm.Dom/wwwroot/js/Window.8.0.4.js#L198-L220

Interestingly, when I double tap on a normal page, the selection menu appear only over text. If I tap over the background , then nothing is happening.

In the snippet above I see you added , which I suppose is the file with the new styles. If we need to add styles we'd better add then inside \css\app.css , instead of creating new files for each addition.
I don't see where you applied .prevent-select. The rest of the html code is similar to the template.

When you say Safari and Chrome, I assume you mean on iPhone, therefore basically it's just Safari/Webkit on both cases. Unfortunately there is no way for me to try it. Therefor we have to go back and forth a couple of times to resolve this.

First I would like to test the page at https://kniengine.github.io/XNAGameStudio/wasm/Ship-Game/index.html to confirm that the issue exist and it's not some other change you made to your app.

It would be helpful if you can test your game with the problem on an android to see if you can replicate it outside iPhone.

Since this seems to be an issue with safari/webKit, then only _-webkit-user-select: none;_is needed.

@andrewandrepowell
Copy link
Author

First I would like to test the page at https://kniengine.github.io/XNAGameStudio/wasm/Ship-Game/index.html to confirm that the issue exist and it's not some other change you made to your app.

Unfortunately, when I try to run the game on my phone, I get a black screen. Works fine on a regular computer.

It would be helpful if you can test your game with the problem on an android to see if you can replicate it outside iPhone.

By the way, I'm using IPhone 8, so it's recorded here. I unfortunately don't have access to Android.

@vchelaru was kind enough to try it on his Android. He couldn't seem to reproduce the issue. I get the issue with both Safari and Chrome, although Chrome is a bit better since only a magnifying glass appears whereas Safari the whole damn screen gets highlighted.

Since this seems to be an issue with safari/webKit, then only _-webkit-user-select: none;_is needed.

Hmm. I'll update my css so that it only has those properties.

@andrewandrepowell
Copy link
Author

andrewandrepowell commented Feb 22, 2025 •
edited
Loading

Here's the link to the itch.io page:

https://andrewandrepowell.itch.io/break-out-extreme

The password is "breakout" without the quotes.

(EDIT: As I mentioned in discord, both the Itch and GitHub hosted versions of the game seem to have the same problem)

@vchelaru
Copy link

I have tested this on Android and iOS. Android works great, but on iOS I am able to reproduce the bug on Safari and Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vchelaru @nkast @andrewandrepowell