[Bug] Hydratation issue causes CSS animations to restart

[sandrina-p]

Describe the bug
I'm building a webpage with some CSS animations that start as soon as the DOM is mounted (with SSR). When the JS is loaded (after a few seconds), the animations are already ongoing or even finished. But then Sapper (or Svelte?) re-attaches the whole DOM and this causes the CSS animations to start again.

Logs
I think there are no relevant logs here.

To Reproduce
Here's a GIF to demonstrate the issue: When the animation "Oh, hey there!" restarts is the moment the JS (Svelte) is executed causing the CSS animation to restart.

The source code: https://github.com/sandrina-p/s008080_2019
Tip: Use Fast 3G to simulate a "slow" internet and CSS starts before JS is finished loading. If the page loads too fast (when cashed) you might not notice this bug because the JS loaded before the CSS animation has started.

Expected behavior
When Svelte loads, it shouldn't re-attach the whole DOM. Instead, it should be smarter and reuse the same nodes.

Information about your Sapper Installation:

• Any browser. I tested on Chrome 79, Firefox 72 and Safari 12
• Mac OS Mojave 10.14.5
• [email protected]
• It happens locally and on production (export version with rollup)

Severity
This is blocking me from releasing the website using Sapper. The whole point of using CSS animations right on mount is to decrease the perceived page load time, so people don't realize the site is still loading. If I'm forced to only load these CSS animations when JS is loaded, the main goal of reducing perceived load time fails.

Additional context
I found this bug, might be related: sveltejs/svelte#4308

---

Update: I tested a fork made by @avi on my project (see commit sandrina-p/portfolio_v3@d4a81d2) and it worked! @avi also opened a PR. Once it's merged I believe it will fix this issue too sveltejs/svelte#4309

[antony]

@sandrina-p I can't see the PR Avi opened. Can you post the link please?

[sandrina-p]

@antony the PR from Avi is to svelte repo: sveltejs/svelte#4309

[benmccann]

Closing this in favor of the issue in the Svelte repo