Repository: sveltejs/sapper

Issue #1088: [Bug] Hydratation issue causes CSS animations to restart
Created: 2020-02-12T18:39:15Z
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
Sapper@0.27.8
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

Duplicate issue #1184: CSS animations are triggered twice
Created: 2020-05-09T12:12:26Z
Describe the bug
CSS animations are run at least twice, even when instructed explicitly to only run once.
To Reproduce
Component with a simple animation:
<style>
  .ellipsis {
    padding: 0;
    margin: 0.33rem 0;
    cursor: pointer;
    letter-spacing: 0.23rem;

    & span {
      display: inline-block;
      font-size: var(--step-0);
      animation: fall 1.3s forwards;
      transform: translateY(-78px);
    }

    & :nth-child(1) {
      animation-delay: -0.9s;
    }

    & :nth-child(2) {
      color: #eb8921;
      animation-delay: -0.7s;
    }

    & :nth-child(3) {
      animation-delay: -0.3s;
    }
  }

  .hidden {
    display: none;
  }

  @keyframes fall {
    0% {
      transform: 78px;
    }

    100% {
      transform: translateY(7px);
    }
  }
</style>

<div on:click class="ellipsis">
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
</div>

The above animation will be triggered twice.
Expected behavior
Animation will only play once. It works with fine with svelte alone, the issue only occurs when using sapper.
Information about your Sapper Installation:


Firefox 76.0


Ubuntu 20.04


Local


Sapper version: 0.27.12


Svelte version: 32.22.2


dynamic application.


Rollup


Severity
The issue makes animation-heavy UI uncomfortable and confusing to use, breaking the visual flow of the application.

Closing comment (2020-05-09T12:46:50Z): Duplicate of #1088.