How to avoid having to scroll on Safari?

Is there a css and/or metatag configuration to avoid having to scroll down to see all the content on mobile Safari, when using scalemode ENVELOP? The top of the game is slightly covered and needs to be scrolled down. It’s like the envelop goes a little bit further than it should. This only happens on Safari…

For those wondering, I found the answer here.

This code snippet:

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>
1 Like

Anyone? No one has this problem, ever? Like on Safari the HEIGHT_CONTROLS_WIDTH or ENVELOP mode scales more than it should and you have to scroll a little bit to see everything. The solution I used is a quick and dirty solution, isn’t there a proper way to do this?

This is my html

<!doctype html>
<html>
    <head>
        <title>DEFAULT HTML</title>
        <meta name="viewport" content="height=device-height, width=device-width, viewport-fit=cover, user-scalable = no">
        <meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
        <style>
            body {
                height: 100%;
                background: #06070c;
                padding: 0;
                margin: 0;
                top: 0;
                display: block;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script>
            function scrollToBottom() {
                window.scrollTo(0, document.body.scrollHeight);
            }
            if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1) {//if Safari(runs on chrome as well).If don't use this 'if' it screws firefox so just scroll on Safari, and chrome, although in chrome the scroll doesn't do harm so it's ok.
                history.scrollRestoration = "manual";
                window.onload = scrollToBottom;
            }
        </script>
        <script src="phaser.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

Simply changing “body” to “html” reduces the issue greatly.

<!doctype html>
<html>
    <head>
        <title>DEFAULT HTML</title>
        <meta name="viewport" content="height=device-height, width=device-width, viewport-fit=cover, user-scalable = no">
        <meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
        <style>
            html {
                height: 100%;
                background: #06070c;
                padding: 0;
                margin: 0;
                top: 0;
                display: block;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script>
            /*function scrollToBottom() {
                window.scrollTo(0, document.body.scrollHeight);
            }
            if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1) {//if Safari(runs on chrome as well).If don't use this 'if' it screws firefox so just scroll on Safari, and chrome, although in chrome the scroll doesn't do harm so it's ok.
                history.scrollRestoration = "manual";
                window.onload = scrollToBottom;
            }*/
        </script>
        <script src="phaser.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

Guys I found out. Add the css rule “touch-action:none” and it will fix the problem. Source: https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari