search

Fintasys / emoji_picker_flutter

A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.
MIT License
154 stars 114 forks source link

Emoji picker does not play nicely with Impeller rendering engine #159

Closed emesterhazy closed 4 months ago

emesterhazy commented 8 months ago

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:

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 commented 8 months ago

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 https://github.com/flutter/engine/pull/45992#issuecomment-1767475736 if this has made its way into stable yet.

Fintasys commented 8 months ago

@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 commented 7 months ago

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:

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

@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 commented 4 months ago

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