Parchment sets the wrong gameport height in OneCol template

Technical Development Interpreters
1

I’ve been running into an odd issue with Parchment (using Zarf’s OneColumn website template). About two-thirds of the time, when I refresh the page, the gameport will be the correct size: the CSS will position it appropriately and everything will be good. But about one-third of the time, the gameport will be too tall for the page, causing the scrollbar to jump around in unexpected ways and making it very difficult to play.

When this happens, it seems the height of the gameport div is being set to some specific value in pixels. (If it’s working normally, that div has no height specified.) If I remove that height specification in the console, everything works properly again.

Resizing the window while the game is being run seems to consistently cause the issue as well. I suspect Parchment is trying to set the gameport size to the height of the window, which causes problems when that window also has a header and footer in it.

What’s causing this? And is there a way to fix it? Executing this line:

document.getElementById("gameport").style.setProperty("height", "auto");

fixes it, but I’m not sure when to trigger that. Calling it in window.onresize doesn’t work, since I think it’s happening after whatever Parchment code is setting things wrong.

2

Which Parchment version are you using?

It’s possible there are issues if Parchment doesn’t have full ownership over the height of the window, I never tested that.

3

How do I check the version? It was downloaded right after the fix for that crash was released.

For now, this seems to work:

function fix_height(){
	document.getElementById("gameport").style.setProperty("height", "auto");
}
window.addEventListener('scroll', fix_height);

Since the window itself shouldn’t scroll unless the height is set wrong.

4

The version is the date that would be shown in the corner in the normal template… but it appears it isn’t displayed anywhere in the OneCol template.

But I think I know what is likely to be the issue. In order to handle iOS virtual keyboards AsyncGlk now uses the VisualViewport API, and changes the height of #gameport to the height of the VisualViewport.

A one column template with header/footer should still be possible, but the header and footer would need to be moved inside the #gameport, and then the #gameport’s margin would need to be changed to account for them. Hmm, except that wouldn’t work for the index.html part of the template. I’m sure it is still possible, but it will take some work to get the template to work nicely with the new AsyncGlk approach.

I think I’ll need to modify AsyncGlk to account for the possibility of #gameport having a margin.

1 Like
5

Okay, I’ve patched AsyncGlk, and the Parchment for Inform 7 template is updated.

I haven’t properly tested it, but I think it might work if you make these modifications to style.css:

Remove position: absolute from #column and #subcolumn.
Add max-width: 600px to #gameport.
Change #gameport’s margin to 72px auto 48px auto.

1 Like
6

Unfortunately that didn’t work for me—the gameport just disappeared completely. But as long as the relevant people (i.e. you) know about this, I’m happy to use my JS hack for now.

7

Hmm. I’ll try testing it properly later. You’re using the OneCol template from Quixe: a Glulx VM interpreter written in Javascript?

8

Almost. I modified the CSS to change the header and footer height to variables (so that I could reference those same variables in the margin properties), and to make the modifications recommended above. (The variables work fine on their own without the further modifications.)

1 Like