Emoji picker does not play nicely with Impeller rendering engine

[emesterhazy]

The default rendering engine on iOS is now Impeller, which doesn't seem to play nicely with the emoji picker. This manifests as jank while scrolling and lots of errors in the console:

[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not create valid atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Cannot render glyphs without prepared atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Failed to render entity.

It seems like the issue might be with Impeller's texture limit, and there are a few open issues that seem related:

• [Impeller] Emoji rendering is broken in the 3.13.3 vs the lower 3.10.6 flutter/flutter#134292
• [Impeller] Typographer: Track multiple atlas Textures when exceeding the device limit. flutter/flutter#133092
• [Impeller] Respect max supported texture size when allocating glyph atlas texture. flutter/engine#45992

Disabling Impeller works as a quick fix to resolve the issue, but it's unfortunate that disabling it is necessary since Impeller is otherwise a more performant rendering engine.

I'm not sure if there's another workaround or change we can make to the emoji picker to avoid this issue until Flutter / Impeller implements a fix, if they do. From my preliminary testing, limiting the size of the picker to 350 px or smaller seems to prevent the atlas failures from occurring, but scrolling is still very janky.

[emesterhazy]

On a hunch, I replaced of all the similey emojis in lib/src/default_emoji_set.dart with ~300 copies of the same smiley emoj.

Running with Impeller this picker of 300 identical emoji's runs extremely well, much better in fact than a page of different emojis does even with Impeller disabled.

Based on this, I think it is likely that the texture limit / atlas size issues I linked to before are the underlying issue. Unfortunately I'm not sure there's a quick fix that users can employ until the framework issues are resolved. Flutter did merge one PR aimed at addressing this issue, and I asked in flutter/engine#45992 (comment) if this has made its way into stable yet.

[Fintasys]

@emesterhazy Can you walk me through how you did test it? Impeller suppose to be enabled by default on iOS meanwhile and I can't see any issue running the EmojiPicker on iOS Simulator. Also using extra parameter to enable it seems to not make any difference, so I assume it's running with impeller enabled.

[emesterhazy]

Sorry for the slow reply. I tested the emoji picker on the iOS simulator on iOS 17 as well as a physical iPhone.

Unfortunately I don't remember which version of Flutter I used at the time, but I think it was 3.13 or 3.14. I tested this again today using Flutter 3.16.0 and I'm not seeing errors in the debug console anymore. However, scrolling in the emoji picker is still very janky on the iOS simulator. I'm going to test it on a physical iPhone but I suspect it will perform poorly there as well.

It looks like there's a new bug open in the Flutter repo reporting the jank:

• [Impeller] Poor performance with lots of emojis. flutter/flutter#138798

How does scrolling performance look for you? When I disable Impeller there's no jank while scrolling through emojis, at least compared to Impeller.

I recorded two videos, one with Skia and one with Impeller. IMO the jank in the impeller video is pretty noticeable. It might be easier to see if you download the videos instead of viewing them in Google Drive's player.

[Fintasys]

I was trying to improve performance in version 2.0 and found that I got huge performance increases when I replaced InkWell with MaterialButton in EmojiCell. I don't have access to a physical device right now to test performance on iOS, but it might also helped with the impeller performance.

[emesterhazy]

That's interesting. Do you have any idea why the performance might be so different between the two?

I think that the issues with Impeller show up on the simulator as well, so you don't necessarily need a physical device to test the change.

[Fintasys]

I don't know, I haven't looked deeper into InkWell implementation. I used the profiler to improve widgets that took long to build.

My simulator has a weird behavior and freezes every few seconds, so difficult to test. Will check with real device next week. Once I can confirm improved performance in general, I will release 2.0, the major work is done.

[Fintasys]

@emesterhazy I think with Version 2.0 the performance should be much better, also with Impeller.
Feel free to test it again. Let me know if I can close this issue 🙏

[Fintasys]

Gonna close this issue, if anyone notice performance issues again, please open another issue 🙏