[BUG] Bad Performance on Web with filled Polygons (isFilled flag)

[Tysonpower]

Describe The Bug I got some strange problems with rendering many filled polygons on the map when using the web version. When i don't set them to be filled performance is okay, but when setting the isFilled flag the whole UI is really slow and laggy, when i move the polygons outside the viewfield performance is back to normal.

So to me it seems there is a rendering bug with filled polygons on the web. Did anyone experience similar stuff?

Expected Behavior I would expect that the Performance of a filled and not filled polygon is similar as it seems on all other platforms.

Screenshots & Recordings Left is the macos Version with filled polygons, right is the web version with the filled flag removed what leads to useable performance.

Additional Information I already tested if the color with opacity is the problem, but nothing changes when using an solid color.

---

Doctors Report

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.69.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

To Reproduce Steps to reproduce the behavior:

1. Create a map app that renders many filled polygons (1k or more)
2. run app on web
3. (maybe compare to desktop/mobile version that should be fine)

---

Severity This will help us to label the issue quicker and decide what needs attention first. Only choose fatal if the entire app crashes, otherwise choose non-fatal.

• [X] Non-Fatal
• [ ] Fatal / App Crashes

Frequency/Rarity This will help us to label the issue quicker and decide what needs attention first.

• [ ] Once
• [ ] Uncommon
• [ ] Common
• [X] Always

Applicable Platforms Only select those that you've tested on - one or more. If possible, test on a variety of platforms.

• [ ] Android
• [ ] iOS
• [X] Web
• [ ] Windows
• [ ] Others (beta platforms)

[ibrierley]

Is every square a polygon, or am I misreading image a bit ? I'm also guessing they all have opacity on there, and how many are there in total ? Opacity is often a bit of a killer in terms of performance

[ibrierley]

Actually, I'm guessing you're using a semi-transparent color...what's the performance like with a none transparent color, just for testing to see if thats the issue...

[Tysonpower]

Every square is a polygon correct, as mentioned under "Additional information" i already tested without an transparent color, it didn't improve performance. I used chrome btw.

[ibrierley]

Apologies, had missed a couple of bits on the original issue...Best thing to do is produce a minimal example others can test with then I think.

[Tysonpower]

Okay i will create an example and link it.

[Tysonpower]

@ibrierley Maybe it has todo with this issue of the canvaskit library that is used? The Polygons use a path when filled and otherwise lines right?

https://github.com/flutter/flutter/issues/78543#issuecomment-885074748

[ibrierley]

If you are using the flutter_map Polygon layer, I think it uses path.addPolygon(offsets, true); I think whatever (just the styling would say filled).

[Tysonpower]

Okay i think i found the issue, the canvaskit library has a problem in Chrome based browsers due to skia. On firefox and Safari the performance seems fine with filled squares.

There is an open Github Issue for that over on the Flutter repo: https://github.com/flutter/flutter/issues/105044

UPDATE: As a Workaround for Chrome the web build can be switched to the html renderer. flutter build web --web-renderer html

[ibrierley]

Good find and thanks for the update. There's not a lot of info on the original Chrome problem reported which is a shame (wondering if there could have been some other workarounds in code).

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[JaffaKetchup]

Has this issue resolved itself since Flutter v3.3.0 and flutter_map v3? I know Flutter is working toward a new rendering engine Impeller, and we've switched around the way getting images works.

[JaffaKetchup]

Ok, I'm going to close this for now due to inactivity. If you need this reopened, please just let me know. Thanks for the info!