📜 Description

We're facing an issue: the tree walked with visitChildElements() is out of sync to what is currently rendered by RenderRepaintBoundary.toImage(), even though there's no async gap between these two. This causes masks to be off during repaints, e.g. when scrolling a view or when text is rendered in different places between two screens. This is most easily reproducible when there's no animation between the two screens.

For example, Spotube's Search vs Library (2nd and 3rd bottom bar buttons). The following composition of three subsequent frames shows the transition. Note the special mode of rendering which prints masks (in the color that the text was in the original button) and then writes the text that is being masked in bright green. This way you can see that the masks move over to their new position (about 30 px higher then before) when the screen changes, but the captured image still renders the previous version of the screen. I've added a red guideline to make this change easier to see.

I've created an issue upstream to try and get this resolved "properly". As an interim solution, we're taking two subsequent screenshots (two frames) and only actually capture a screenshot for replay if the two are exactly the same.

💡 Motivation and Context

💚 How did you test it?

Mostly manually as I could not reproduce the masking issue programatically. There are some new and updated tests to cover what I could.

📝 Checklist

• I reviewed submitted code
• I added tests to verify changes
• No new PII added or SDK only sends newly added PII if sendDefaultPii is enabled
• I updated the docs if needed
• All tests passing
• No breaking changes

🔮 Next steps