Skip to content

Content is reset at unexpected times #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Rich-Harris opened this issue Mar 23, 2023 · 3 comments · Fixed by #309 or #345
Closed

Content is reset at unexpected times #298

Rich-Harris opened this issue Mar 23, 2023 · 3 comments · Fixed by #309 or #345

Comments

@Rich-Harris
Copy link
Member

I'm sure there's a simpler repro than this, but I'm making a note of what I observed just now for further investigation later.

  1. Go to https://learn.svelte.dev/tutorial/textarea-inputs
  2. Hit 'solve'
  3. Change - lists to - [links](https://example.com)
  4. Click the newly-rendered link in the output section
  5. Close the tab

The content will have been reset (this happens for me in Firefox and Chrome).

Weirdly, you have to actually close the tab — if you leave it open and navigate back to the tutorial, the content won't have been reset. And if you drag the newly opened tab into a separate window and then close it, nothing will happen. It's... strange.
@tomoam
Copy link
Contributor

tomoam commented Mar 24, 2023

I found that the iframe was reloading.

reset-output.mov

The relevant code is here.

learn.svelte.dev/content/tutorial/common/src/__client.js

Lines 112 to 124 in 6736ff7

function ping() {
parent.postMessage(
{
type: 'ping',
data: {
path: location.pathname + location.search + location.hash
}
},
'*'
);
}
setInterval(ping, 100);

learn.svelte.dev/src/routes/tutorial/[slug]/Output.svelte

Lines 54 to 62 in 6736ff7

clearTimeout(timeout);
timeout = setTimeout(() => {
if (dev && !iframe) return;
// we lost contact, refresh the page
loading = true;
set_iframe_src($base + path);
loading = false;
}, 1000);

This is caused by throttling of setInterval and setTimeout.

https://developer.chrome.com/blog/timer-throttling-in-chrome-88/

The ping in __client.js runs every 100ms with setInterval and sends the message. The handle_message in Output.svelte receives that message. If the message does not come for more than 1000 milliseconds, the iframe is reloaded.

However, when the tab goes to the background, setInterval and setTimeout are throttled to run approximately every 1000 - 1500 milliseconds. This means that sometimes the setTimeout delay time in the handle_message is shorter than the ping delay time, at which time set_iframe_src is called and the iframe is reloaded.

I have found the cause, but I don't know how to fix it.

@Rich-Harris
Copy link
Member Author

ah, interesting! good sleuthing. i wonder if we can emit ping-pause on the pagehide event

@tomoam
Copy link
Contributor

tomoam commented Mar 25, 2023

Thanks for the advice, I'll try it.

This was referenced Mar 27, 2023
Closed
Merged
@Rich-Harris Rich-Harris mentioned this issue Apr 8, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@Rich-Harris @tomoam