Flickering when using iframe and react-spring

[churichard]

I'm trying to use useTransition from react-spring with an iframe. It works great with React, but when I try using Preact, I get a weird flickering after the transition is complete.

Reproduction

https://codesandbox.io/s/preact-react-spring-iframe-exdqh?file=/app.js

Steps to reproduce

Click on the "Click me" button and observe that the text in the iframe flickers after the transition has completed.

Expected Behavior

No flickering -- the transition should be smooth.

Actual Behavior

The webpage in the iframe flickers.

Other notes

Some other things I've noticed:

• There is no flickering if I don't use react-spring.
• There is no flickering if I use a div instead of an iframe.

[sventschui]

Hi there

Thank you for the report and the reproduction case. I played a bit with your CSB and it seems that something is going wrong with the preservation of the iframe DOM node when the transitions array changes from two to one item.

While we investigate this, you might want to add a .filter(({ item }) => item) (so it becomes transitions.filter(({ item }) => item).map(...). This will work around the issue for now.