3
I have sent my game to moderation and got rejected because of this:- Browser scrolling is present during the game (clause 1.10.2).
Attachments:
I added this to my index html
html, body {
overflow: hidden;
}
but its still scrolling.This scrolling appears when i zoom in my web game page maybe need to unable zooming?
overflow: hidden needs to be set for the element that’s scrolling. Check which elements your game is inside, and add them to the html, body list.
Changing the list to html, body, div might fix it, div is the most commonly used container element.
I have added like this
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, user-scalable=no' />
<title>Ballon</title>
<style type='text/css'>
html, body {
overflow: hidden;
}
body {
touch-action: none;
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color:
But after zooming in it doest work
I have changed this to this
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, user-scalable=no' />
<title>Ballon</title>
<style type='text/css'>
body {
touch-action: none;
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: black;
overflow: hidden; /* Disable scrolling */
max-width: 100vw;
max-height: 100vh;
}
#canvas {
display: block;
margin: 0;
color: white;
max-width: 100vw;
max-height: 100vh;
}
to this but still doesnt work
Can you show the rest of the file, where the HTML tags are?
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, user-scalable=no' />
<title>Ballon</title>
<style type='text/css'>
body {
touch-action: none;
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: black;
overflow: hidden; /* Disable scrolling */
max-width: 100vw;
max-height: 100vh;
}
#canvas {
display: block;
margin: 0;
color: white;
max-width: 100vw;
max-height: 100vh;
}
#canvas:focus {
outline: none;
}
.godot {
font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
color: #e0e0e0;
background-color: #3b3943;
background-image: linear-gradient(to bottom, #403e48, #35333c);
border: 1px solid #45434e;
box-shadow: 0 0 1px 1px #2f2d35;
}
/* Status display
* ============== */
#status {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
/* don't consume click events - make children visible explicitly */
visibility: hidden;
}
#status-progress {
width: 366px;
height: 7px;
background-color: #38363A;
border: 1px solid #444246;
padding: 1px;
box-shadow: 0 0 2px 1px #1B1C22;
border-radius: 2px;
visibility: visible;
}
@media only screen and (orientation:portrait) {
#status-progress {
width: 61.8%;
}
}
#status-progress-inner {
height: 100%;
width: 0;
box-sizing: border-box;
transition: width 0.5s linear;
background-color: #202020;
border: 1px solid #222223;
box-shadow: 0 0 1px 1px #27282E;
border-radius: 3px;
}
#status-indeterminate {
height: 42px;
visibility: visible;
position: relative;
}
#status-indeterminate > div {
width: 4.5px;
height: 0;
border-style: solid;
border-width: 9px 3px 0 3px;
border-color: #2b2b2b transparent transparent transparent;
transform-origin: center 21px;
position: absolute;
}
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
#status-notice {
margin: 0 100px;
line-height: 1.3;
visibility: visible;
padding: 4px 6px;
visibility: visible;
}
#banner-container {
position: absolute;
bottom: 0px;
width: 100%;
height: 90px;
}
</style>
<link id='-gd-engine-icon' rel='icon' type='image/png' href='index.icon.png' />
<link rel='apple-touch-icon' href='index.apple-touch-icon.png'/>
</head>
<body>
<canvas id='canvas'>
HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser.
</canvas>
<div id="banner-container" style="display: none"></div>
<div id='status'>
<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id='status-notice' class='godot' style='display: none;'></div>
</div>
<script type="text/javascript" src="./instant-games-bridge.js"></script>
<script type='text/javascript' src='index.js'></script>
<script type='text/javascript'>//<![CDATA[
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":7164592,"index.wasm":13790961},"focusCanvas":false,"gdnativeLibs":[]};
var engine = new Engine(GODOT_CONFIG);
(function() {
const INDETERMINATE_STATUS_STEP_MS = 100;
var statusProgress = document.getElementById('status-progress');
var statusProgressInner = document.getElementById('status-progress-inner');
var statusIndeterminate = document.getElementById('status-indeterminate');
var statusNotice = document.getElementById('status-notice');
var initializing = true;
var statusMode = 'hidden';
var animationCallbacks = [];
function animate(time) {
animationCallbacks.forEach(callback => callback(time));
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
function setStatusMode(mode) {
if (statusMode === mode || !initializing)
return;
[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
elem.style.display = 'none';
});
animationCallbacks = animationCallbacks.filter(function(value) {
return (value != animateStatusIndeterminate);
});
switch (mode) {
case 'progress':
statusProgress.style.display = 'block';
break;
case 'indeterminate':
statusIndeterminate.style.display = 'block';
animationCallbacks.push(animateStatusIndeterminate);
break;
case 'notice':
statusNotice.style.display = 'block';
break;
case 'hidden':
break;
default:
throw new Error('Invalid status mode');
}
statusMode = mode;
}
function animateStatusIndeterminate(ms) {
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
if (statusIndeterminate.children[i].style.borderTopColor == '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
child.style.borderTopColor = '';
});
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
}
}
function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
var lines = text.split('\n');
lines.forEach((line) => {
statusNotice.appendChild(document.createTextNode(line));
statusNotice.appendChild(document.createElement('br'));
});
};
function displayFailureNotice(err) {
var msg = err.message || err;
console.error(msg);
setStatusNotice(msg);
setStatusMode('notice');
initializing = false;
};
if (!Engine.isWebGLAvailable()) {
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
let bridgeOptions = {
platforms: {
'game_distribution': {
gameId: ''
},
'vk_play': {
gameId: ''
}
}
}
bridge.initialize(bridgeOptions).then(() => {
let bannerContainer = document.getElementById('banner-container')
if (bridge.platform.id === bridge.PLATFORM_ID.CRAZY_GAMES || bridge.platform.id === bridge.PLATFORM_ID.GAME_DISTRIBUTION) {
bridge.advertisement.on(bridge.EVENT_NAME.BANNER_STATE_CHANGED, state => {
bannerContainer.style.display = state === 'loading' || state === 'shown' ? 'block' : 'none'
})
} else {
bannerContainer.style.display = 'none'
}
engine.startGame({
'onProgress': function (current, total) {
if (total > 0) {
statusProgressInner.style.width = current/total * 100 + '%';
setStatusMode('progress');
if (current === total) {
// wait for progress bar animation
setTimeout(() => {
setStatusMode('indeterminate');
}, 500);
}
} else {
setStatusMode('indeterminate');
}
},
}).then(() => {
setStatusMode('hidden');
initializing = false;
}, displayFailureNotice);
})
}
})();
//]]></script>
</body>
</html>
})();
//]]></script>
</body>
</html>
Odd. I don’t see why it’s scrolling, and zoom looks disabled too. 
The only thing I can think of is changing the viewport meta tag to <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">, but that’s a long shot.
Yes i changed even zoom because of it, it starts scrolling, and how to change that viewport?
In the very beginning, replace this line:
<meta name='viewport' content='width=device-width, user-scalable=no' />
with this line:
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0'>
I tried this but even with this it still scrolling, any ideas ?
I’m out of ideas, sorry. I’d need to see the page in a browser to be able to debug further.
No problem, you mean web page game console?
I just need the URL to the web page, so I can use the browser’s dev console.
is it opening?
I can open it but I can’t see the scrollbars, even when I zoom in. It could be something to do with the browser… I’m opening it with Chrome.
Bruh really, i am using opera browser i think thst was the problem, then Thank you very much, i appreciate it!
In firefox as well it seems to work fine - I can’t zoom at all once the game loads. Before it loaded, I could zoom in, but no scroll bars appeared.
Thanks for trying,seems problem was in my browser.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
