Ink issue: Page jumps to top and won't scroll down again

I don’t know if this is the place to put this, but I hope you don’t mind if I give it a shot. I’m finishing up a story in Ink (writing it in Inky) and have come against the following problem:

I’m having an issue in which some choices in my story cause the page to jump to the top of the story and then stop responding to scrolling (scroll wheel and dragging the scroll bar). The problem is not consistent and does not happen every time the same options are picked. The problem is only occurring in web based versions of my game, I have not been able to reproduce it in Inky. I’ve encountered it in both Firefox and Google Chrome.

The problem can be worked around by saving the story (after it has jumped to the top and stopped scrolling) and then refreshing the page. Saving and loading again without refreshing makes the most recent part of the story appear at top, but still leaves me unable to scroll.

My story does contain elements of randomness, and after each choice has been selected I check a die roll against a stat to see which knot or stitch should be jumped to. I don’t know if this is relevant, as the issue only happens on certain choices and even then only on certain occasions, sometimes working for both successes and failures, and sometimes not, again for both successes and failures.

I imagine that the issue lies not in my .ink file but in some of the scripts that make it run online (as I have not found any such issue within Inky’s play-as-you-write system itself), but I know nothing about how those scripts work so I couldn’t say any more.

Huh. Inky is an Electron app, which means it’s a web app that’s basically bundled with a (Chrome-based?) browser. So it should be the same code in both places? I think? No, wait, I just looked at the code and it’s different in the editor.

I’d try opening the developer tools in your browser when it happens and see if there are any JavaScript errors in the console? The scrolling code for the web export is relatively simple but I could see it locking up if it got a math error and ended up with invalid numbers…

1 Like

I know very little about Ink and basically 0 about java script or web development, so sorry for the ignroance, but the only error I can find is a: “Source map error: Error: NetworkError when attempting to fetch resource.”, which is found on the page right from when I open it and does not change when the glitch occurs. I followed through to the documentation and the issue didn’t really seem to be relevant to the bug I’m getting, but I might be totally wrong there.

Since posting the original post I have tried taking out my use of randomness and using a different computer to create the web file. The bug persists. I have also found that if I click on the bottom of the scroll bar the page twitches (or jumps) down for a fraction of a moment and then returns to top, which leads me to believe that something is making it execute an endless command to automatically scroll up. I can tell that somewhere there must be something that controls automatic scrolling, but I don’t know where I would even start looking for it or how to turn it off.

Also thank you so much for helping me! It’s really wonderful for someone new to the scene like me to know there are really kind and helpful people like you happy to share your time and knowledge with us :slight_smile:

1 Like

No, I wasn’t expecting you to know anything about JS or webdev: just was hoping there’d be an easy error that would say where it’s happining.

The source map is a debugging resource: it’s not necessary and shouldn’t have anything to do with the problem. The fashion these days is to use a tool to “minify” your javascript, scrunching it down to remove all unnecessary whitespace and give most of the variables single-letter names: the source map lets the browser display errors as if they came from the original actually readable code, or something like that.

As for the twitching, yeah, that’s what I expected. Instead of trusting the browser to have a smooth scrolling ability, the Ink web code tells the browser where it wants to be scrolled to every single frame until it gets there. So probably what’s happening is it’s getting some sort of math error that gives a NaN (Not a Number) value, and the scroll routine is treating that as meaning the top of the document? And then because it’s not a real number, it never gets there, so it keeps trying forever…

And now that I think about it more carefully, NaNs usually don’t give off JavaScript errors: they just mess up all your calculations but they won’t show up as errors in the console. Hrm. Trying to think how to debug this.

OK. The code is in main.js. The problem is almost certainly occurring at line 242: if dist (and hence duration) is zero, then you’d have a divide-by-zero error which gives a NaN.

So you could try opening up main.js in a text editor (Notepad is fine if you don’t have something else that you like) and add a line after line 237 so it says:

var dist = target - start;
if(Math.abs(dist) < 0.01) return;   // <-- this is the new code

That should prevent it from happening.


Oh Josh you are a lifesaver! I cannot express how worked up about that glitch I was. The bad news is that, despite making complete sense to me, your fix of preventing divide-by-zero errors didn’t work (for reasons I am completely blind to). However, and I know full well how inelegant this is, I had a look at the function in its entirety and thought it probably wouldn’t break too much if I just took the whole thing out, and now it works absolutely perfectly (to be honest Ink’s tendency to ‘do the scrolling for me’ was something I found annoying anyway).

I am perfectly happy with my brute force solution, but I would also completely understand if this is a bit anti-climactic and you’d like to find the actual solution. I’m happy to send you my code or try other things if you wanted, but as I say, for me I’ve found a solution that seems to work perfectly for me.

I’d love to put a thank you in the credits of the game (it’s a short, wry heist heavily inspired by the style and mechanics of Fallen London), but I understand you may not want your name on something you haven’t seen.

Really thank you so much, it’s incredibly generous of you to take your time out to help.

(Also thanks for the description of source maps, always love to learn about things like that :slight_smile:)