Flags do not appear in mobile web browser

[esmlima]

I don't understand why, but I'm facing different behaviour in flutter web projects when accessed from Desktop vs Mobile.

My demo project:
https://payment.gula.mobi/#/

On desktop it works fine:

On Android mobile, using Chrome:

On Android mobile, using Firefox:

On iPhone, using Safari:

[cedvdb]

Good catch, hopefully someone can look into it. It might be due to svgs.

[arjittw]

Actually, they are not working in html renderer, only working in CanvasKit renderer. By default, flutter uses CanvasKit on desktop browsers and html renderer on mobile browsers.

[cedvdb]

This might be due to the move to flutter-svg, as I recall it was working previously

[blopker]

Related: dnfield/flutter_svg#845

Yeah, looks like it's an issue with flutter_svg.

[blopker]

Made a PR, hope it helps: #11

[cedvdb]

Thanks a lot @blopker I'll get on it this weekend, I'm drowning in high priority tasks right now

[cedvdb]

should be fixed in 1.0.4

[agordeev]

This issue happens again in 5.0.0

[cedvdb]

the flags were regenerated with the original library https://github.com/HatScripts/circle-flags which readded the mask.

[cyrilmata]

Hello, this issue happens again in 5.0.0, flutter_svg causes error in web release mode only

I rollback to previous version waiting for a fix :)

[cedvdb]

@cyrilmata the original fix is linked above and can be reimplemented. Since the process has to be repeated each time the flags are regenerated, this should be implemented in a way that fixes the issues every time the files are regenerated.

This issue in the original repository would fix it at the source: HatScripts/circle-flags#105