Deleted elements are not removed from the document but instead overlay existing elements

[weijarz]

When used with Solid-JS and virtua,and use the official demo code, sometimes may notice overlapping elements. These are elements that have been deleted but not removed from the document. This can easily happen when the list updates while the page is being turned.

Currently, I've applied a patch in plugin to resolve this issue.

} else if (action === 'remove') {
  keyframes = [
    {
      transform: 'scale(1)',
      opacity: 1
    },
    {
      transform: 'scale(.98)',
      opacity: 0
    }
  ]

  // Patch!!!
  let animation: Animation | undefined
  // Cannot use `el.getAnimations()` within the timeout handler because the animation objects array no longer exists at that point. Therefore, you must save it here for later use.
  queueMicrotask(() => {
    animation = el.getAnimations()[0]
  })
  setTimeout(() => {
    if (el.isConnected && animation && animation.playState === 'idle') {
      animation.finish()
    }
  }, DURATION)

It appears that the element animation did not receive the finish event.