Switching between light and dark modes in the material 3 sample on the web is super janky. I haven't looked at HTML, but it does happen in CanvasKit mode. Profiling the app I see way too much text layout. Theoretically, there shouldn't be any layout at all, since only colors are changing. So even the framework shouldn't be laying out text.

But let's allow the framework re-layout text for some reason. The second problem is that the web engine re-lays out text during the paint phase. I'm suspecting that something broke the heuristic that attempts to save memory by proactively deleting paragraphs and then restoring them on repaint.

This is not right. We should fix this.

Reproduction

1. git clone [email protected]:flutter/samples.git
2. cd samples/material_3_demo
3. flutter run -d chrome --profile
4. Toggle the "Brightness" switch and observe janky transition
5. Use Chrome DevTools' "Performance" tab to record a profile
6. Observe a lot of text layout present in the profile (similar to the picture above)

Revisions

Flutter: 9a721c456d4a6418c60f2512cbb54ee420b9c69b
Samples: 3e9bb78aec619065bbb29cfb1d20a80026c63818