Web view with images doesn't scroll far enough

[nitnelave]

Hi,

I made a story with Inky, with an image (png), and exported it to web.

When I get to the dialog with the image, the dialog option below is mostly cut off, I can barely see the top and can't scroll down, so I can't read the text.

I could reproduce that with firefox (beta) on android but not chrome, and safari on iOS.

[nitnelave]

Update: I could also reproduce it on firefox and chrome on desktop (linux).

[elliotherriman]

Oh, I know this one! I ran into it a few times when writing Calico. What's happening is that the Javascript is locking your story's height once every line and image is added to the story container. Which, to be clear, is the expected behaviour. If it doesn't do that, when the player clicks a choice, those choices will get removed from the div, the div will shrink, and the player's scroll position will jump upwards awkwardly.

My best guess as to what's happening is this: the web player is calculating the bottom edge of the last line, and storing that away as its height. But it's doing so before your image has loaded, meaning it treats that line as... zero pixels tall. So now you can't scroll down, because as soon as the image loads in, it pushes all the text after it down, past the locked height of the story container.

Solving it, for me, meant locking the height once the player chooses a choice, and then setting it back to auto once everything's removed. It's not a perfect solution, and I can't speak for how well it would work Inky's web player, but that's the direction I'd suggest heading in.

[nitnelave]

Hmmm... In that case, would it work to hardcode the size of the image so that it's available before it loads? Assuming that the image is available at compile time, the generator could take care of that.

[elliotherriman]

That would involve tweaking how main.js processes image tags, and definitely wouldn't be the most convenient thing in the world, but I guess you could?

Otherwise, I'll see if I can find time to fix this and submit a PR over the next couple of days.

[Beverly-Peders]

I am having a similar issue. I am very new to Inky and coding in general so I'll admit, I did not really understand the solution you presented. What must I do to have the content after the image visible?

[elliotherriman]

What must I do to have the content after the image visible?

After exporting your game to web, find the following line in main.js, and remove it.

storyContainer.style.height = contentBottomEdgeY()+"px";

I can't promise that this fix won't create other issues down the line, but it should work for now?

[spaxton]

Removing this line causes a jitter as choices are removed and then content is added:

storyContainer.style.height = contentBottomEdgeY()+"px";

One solution to preserve the current functionality of calculating the new height of the story in total and scrolling downward without causing hiccups like this is to wrap the end of the loop in a wait function like so:

// Wrapping in a timer function to allow images to load before calculating & scrolling to the bottom of the page setTimeout(() => { // Extend height to fit // We do this manually so that removing elements and creating new ones doesn't // cause the height (and therefore scroll) to jump backwards temporarily. storyContainer.style.height = contentBottomEdgeY()+"px"; if( !firstTime ) scrollDown(previousBottomEdge); }, 700);

That last variable (the 700) is the ms the function waits before advancing. It's a little long, but after profiling how long it was taking for our largest image files to come across the network that's the number we came up with. This solution won't be right for everyone, but it is the simplest that keeps the current features. I plan on optimizing those images and reducing that 700 (hopefully to a much more reasonable ~200) in the future, but everyone's project is going to be different.

[elliotherriman]

I've submitted a pull request to the Inky app, which should update the template and solve this issue. setTimeout works as a quick fix, but anyone with an unreliable or slow connection is going to be left dealing with those same issues. My hope is that this fix will eliminate the need for that.

[franciscrot]

I may not have implemented it properly (I don't know what I'm doing), but @elliotherriman's fix doesn't seem to work for my project? - the images are followed immediately afterward by some very procedurally generated text and choices, could that be causing a problem?

https://github.com/franciscrot/Strange-Cities/blob/main/main.js https://sadpress.itch.io/strange-cities

(The setTimeout workaround was working beautifully on my local copy, but I think my images were too big for it to work on Itch).