Updates to keyed lists break FLIP animations when they occur mid-animation

[dead-claudia]

Mithril version: 2.0.4

Browser and OS: Chrome 83.0.4103.116 on Windows 64-bit, Safari 13.1 on iOS, Firefox 78.0.2 on Windows 64-bit

Project:

Code

Live Flems

<button id="toggle">Toggle</button>
<div style="display:flex">
  <ul id="prev"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
  <ul id="animate"></ul>
  <ul id="next"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</div>

const animateRoot = document.getElementById("animate")
let values = Array.from({length: 8}, (_, i) => i)

function render() {
  m.render(animateRoot, values.map(i => m("li", {key: i}, i)))
}

let interval = setTimeout(updateBody, 500)

function updateBody() {
  interval = setTimeout(updateBody, 500)
  const prev = values
  // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
  const next = values = prev.slice()
  for (let i = next.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    const temp = next[j]
    next[j] = next[i]
    next[i] = temp
  }

  requestAnimationFrame(() => {
    const prevList = document.getElementById("prev").childNodes
    const nextList = document.getElementById("next").childNodes

    // Reorder elements in DOM
    for (let i = 0; i < prev.length; i++) {
      prevList[i].textContent = prev[i]
    }
    for (let i = 0; i < next.length; i++) {
      nextList[i].textContent = next[i]
    }

    const prevElems = Array.from(animateRoot.childNodes)
    
    // First
    const firstParent = animateRoot.getBoundingClientRect()
    const first = prevElems.map(e => {
      const child = e.getBoundingClientRect()
      return {
        top: child.top - firstParent.top,
        left: child.left - firstParent.left,
      }
    })

    render()

    // Last + Invert
    const lastParent = animateRoot.getBoundingClientRect()
    const movedElems = prevElems.filter((e, i) => {
      const last = e.getBoundingClientRect()
      const dx = first[i].left - (last.left - lastParent.left)
      const dy = first[i].top - (last.top - lastParent.top)
      if (dx === 0 && dy === 0) return false
      e.style.transform = `translate(${dx}px,${dy}px)`
      e.style.transitionDuration = "0s"
      return true
    })

    // Force re-layout
    document.body.offsetHeight

    // Play
    movedElems.forEach((e, i) => {
      const callback = () => {
        e.removeEventListener("transitionend", callback, false)
        e.classList.remove("transition")
      }
      e.classList.add("transition")
      e.addEventListener("transitionend", callback, false)
      e.style.transform = e.style.transitionDuration = ''
    })
  })
}

document.getElementById('toggle').onclick = () => {
  if (interval) {
    clearTimeout(interval)
    interval = null
  } else {
    updateBody()
  }
  p('toggle', interval != null)
}

render()

Steps to Reproduce

1. Open web page

You can enable and disable the animations at will using the "Toggle" button, but that's not part of the repro.

Expected Behavior

The animation to be smooth.

Current Behavior

The animation appears choppy whenever the subtree updates, and list items often unexpectedly jump.

Context

The following vanilla code works correctly. It's a near-exact clone of the above, but it simply uses appendChild instead of a full keyed diff.

Live Flems

<button id="toggle">Toggle</button>
<div style="display:flex">
  <ul id="prev"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
  <ul id="animate"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
  <ul id="next"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</div>

const animateRoot = document.getElementById("animate")
let cachedElems = Array.from(animateRoot.childNodes)
let interval = setTimeout(updateBody, 500)

function render() {
  for (const elem of cachedElems) animateRoot.appendChild(elem)
}

function updateBody() {
  interval = setTimeout(updateBody, 500)

  const prevElems = cachedElems
  const nextElems = cachedElems = prevElems.slice()
  // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
  for (let i = nextElems.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    const temp = nextElems[j]
    nextElems[j] = nextElems[i]
    nextElems[i] = temp
  }

  requestAnimationFrame(() => {
    const prevList = document.getElementById("prev").childNodes
    const nextList = document.getElementById("next").childNodes

    // Reorder elements in DOM
    for (let i = 0; i < prevElems.length; i++) {
      prevList[i].textContent = prevElems[i].textContent
    }

    for (let i = 0; i < nextElems.length; i++) {
      nextList[i].textContent = nextElems[i].textContent
    }

    // First
    const firstParent = animateRoot.getBoundingClientRect()
    const first = prevElems.map(e => {
      const child = e.getBoundingClientRect()
      return {
        top: child.top - firstParent.top,
        left: child.left - firstParent.left,
      }
    })

    render()

    // Last + Invert
    const lastParent = animateRoot.getBoundingClientRect()
    const movedElems = prevElems.filter((e, i) => {
      const last = e.getBoundingClientRect()
      const dx = first[i].left - (last.left - lastParent.left)
      const dy = first[i].top - (last.top - lastParent.top)
      if (dx === 0 && dy === 0) return false
      e.style.transform = `translate(${dx}px,${dy}px)`
      e.style.transitionDuration = "0s"
      return true
    })

    // Force re-layout
    document.body.offsetHeight

    // Play
    movedElems.forEach((e, i) => {
      const callback = () => {
        e.removeEventListener("transitionend", callback, false)
        e.classList.remove("transition")
      }
      e.classList.add("transition")
      e.addEventListener("transitionend", callback, false)
      e.style.transform = e.style.transitionDuration = ''
    })
  })
}

// Utility bits
document.getElementById('toggle').onclick = () => {
  if (interval) {
    clearTimeout(interval)
    interval = null
  } else {
    updateBody()
  }
  p('toggle', interval != null)
}

render()

---

Edit:

Mithril's far from the only one with this issue: https://twitter.com/isiahmeadows1/status/1284726730574315522

• React: Bug: Updates to keyed lists break FLIP animations when they occur mid-animation facebook/react#19406
• Preact: Updates to keyed lists break FLIP animations when they occur mid-animation preactjs/preact#2637
• Inferno: Updates to keyed lists break FLIP animations when they occur mid-animation infernojs/inferno#1519
• And likely others

Note: Vue is not affected by this bug and carries the same behavior as the vanilla version - go here and spam the "Shuffle" button to see.

Edit 2: Also relevant: https://github.com/whatwg/html/issues/5742

[dead-claudia]

Note to whoever aims to fix this: it requires a lot of experimentation and will require significant knowledge of the internals. It'll be easiest if you set the bundler to watch mode and create a throwaway HTML file with the above body and keep the devtools open with caching disabled, so you can refresh the page frequently. And no, you won't be able to automatically test this until you can determine what causes the jumpiness.

[yossicadaner]

@isiahmeadows
I am not sure if this helps, but I think it's related to something we discussed in the past
#2135

[dead-claudia]

@yossicadaner That's a separate issue, and this one's really rooted in a spec oddity (bug?).

[kfule]

(memo)
I'm not sure if this will be helpful, but for reference and information sharing, I'll note down a few points.
(I don't think I can do anything more about this issue.)

about moveBofore API

The moveBefore API, that was created as a spin‑off of this issue, doesn’t appear to be related to solving the issue itself.
Changing insertBefore to moveBefore does not seem to alter the behavior of that flems.
(I think Claudia also commented about it (whatwg/dom#891 (comment).))

Regardless of this issue, the moveBefore API is useful, so I'm looking forward to its implementation in Safari.😄

workaround for that flems to behave correctly

This is an ad hoc workaround, but inserting transform and transitionDuration in the following line seems to resolve the issue.
flems

// First
const firstParent = animateRoot.getBoundingClientRect()
const first = prevElems.map(e => {
  const child = e.getBoundingClientRect()
+ e.style.transform = "translate(0)"
+ e.style.transitionDuration = "0s"
  return {
    top: child.top - firstParent.top,
    left: child.left - firstParent.left,
  }
})

This is just a workaround, not a solution.

Additionally, it appears that the issue is caused by only a subset of nodes inserting/appending. Therefore, moving all nodes instead of using LIS for non-movement also improves the behavior (though this approach results in huge performance degradation).
flems

[dead-claudia]

@kfule My current line of thinking on how to sidestep the missing HTML API problem is this shadow DOM pattern:

• Render the nodes into the element itself. Make sure they are keyed, include a slot: key attribute, and always place new nodes at the end so the per-child animation state doesn't get mucked with. (Think of it as a keyed queue, where you push to the end and remove by key.)
• Manage the ordering in the shadow DOM with <slot name="..."> elements. These can be animated as needed as well.

This of course may require injecting a stylesheet into the shadow root. But it separates the animation/transition state of the nodes themselves from that of the list, and that ultimately sidesteps the issue. It's very awkward to manage, though, and I'm not 100% sure if that abstraction belongs in core or not.

Edit: iframes are also of concern here. And what's held me back the most on the design front is my inability to make it not clumsy. The easy part is rendering to the shadow. The hard part is ensuring CSS keyframes declarations actually work. And that requires you to clone or adopt parent stylesheets. Cloning them essentially requires a MutationObserver on every shadow root to make it transparent, and shadowRoot.adoptedStyleSheets doesn't provide the observation I need to live-update (despite the IDL type being named ObservableArray<T>).

If w3c/csswg-drafts#11547 ever gets implemented, that would make this workaround effectively seamless, as keyframes declarations would be inherited and usable in slot animations.

Also, I'm not 100% sure this works from an accessibility standpoint. I'd have to do some digging to see if screen readers traverse slotted elements in shadow DOM order or in light DOM order. There's already accessibility issues with labels needing to jump out of the shadow DOM, so I wouldn't be surprised if there's an accessibility gotcha here.