Viewport issues, (0|0) outside of the frame

J.Hilk

Hi everyone,

I recently started to experiment with Qt for WebAssembly I set it up:

macOS Sonoma 14.4.1
Web Assembly Qt 6.71
emsdk 3.1.50

I made a small and simple program for a game that I play and I host it on GitHub via the convenient GitHub Pages feature.

You can find the repo here:
https://github.com/DeiVadder/SalvationsEdgeVerity

and the webpage with the app here
https://deivadder.github.io/SalvationsEdgeVerity/

I'm pleased with the result for my quick and dirty experiments :D

however when you compare these two screenshots:

you can clearly see, something is wrong on the 2nd picture.

It seems that on mobile the viewport origin is way up under the top status bar or even further.
I have no idea how to debug this or how to fix this.

Any help is appreciated.

I think this might be related to the original html page that is loaded, so I post that content here for review, but you can also find it in the repository, of course. It is basically unaltered from the default auto generated html. I simply changed the name, so that GitHub would load it correctly:

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--Set visual viewport size for mobile devices to the device size,
        witch results in a scale of 1 and a 1:1 mapping between CSS pixels
        and Qt device independent pixels. -->
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=0"/>

    <title>SalvationsEdgeVerity</title>
    <style>
      /* Make the html body cover the entire (visual) viewport with no scroll bars. */
      html, body { padding: 0; margin: 0; overflow: hidden; height: 100% }
      #screen { width: 100%; height: 100%; }
    </style>
  </head>
  <body onload="init()">
    <figure style="overflow:visible;" id="qtspinner">
      <center style="margin-top:1.5em; line-height:150%">
        <img src="qtlogo.svg" width="320" height="200" style="display:block"></img>
        <strong>Qt for WebAssembly: SalvationsEdgeVerity</strong>
        <div id="qtstatus"></div>
        <noscript>JavaScript is disabled. Please enable JavaScript to use this application.</noscript>
      </center>
    </figure>
    <div id="screen"></div>

    <script type="text/javascript">
        async function init()
        {
            const spinner = document.querySelector('#qtspinner');
            const screen = document.querySelector('#screen');
            const status = document.querySelector('#qtstatus');

            const showUi = (ui) => {
                [spinner, screen].forEach(element => element.style.display = 'none');
                if (screen === ui)
                    screen.style.position = 'default';
                ui.style.display = 'block';
            }

            try {
                showUi(spinner);
                status.innerHTML = 'Loading...';

                const instance = await qtLoad({
                    qt: {
                        onLoaded: () => showUi(screen),
                        onExit: exitData =>
                        {
                            status.innerHTML = 'Application exit';
                            status.innerHTML +=
                                exitData.code !== undefined ? ` with code ${exitData.code}` : '';
                            status.innerHTML +=
                                exitData.text !== undefined ? ` (${exitData.text})` : '';
                            showUi(spinner);
                        },
                        entryFunction: window.SalvationsEdgeVerity_entry,
                        containerElements: [screen],
                        
                    }
                });
            } catch (e) {
                console.error(e);
                console.error(e.stack);
            }
        }
    </script>
    <script src="SalvationsEdgeVerity.js"></script>
    <script type="text/javascript" src="qtloader.js"></script>
  </body>
</html>

thanks

J.Hilk

I'm a f*ing moron, never mind.

//old
y:smallestSide - height
...


//"fix"
        y:Math.max(smallestSide - height,0)