Crashes on Chrome in Android and FireFox on Android

[hjrobinson]

Unfortunately executing the code causes a crash in Chrome and FireFox on Android. What causes the crash is the drawing of the canvas when a new mapboxgl map is instantiated (renderMap).

I attempted a workaround by creating a renderMap prior to print time but the resize() function which is needed to redraw the canvas representing the new dimensions and the dpi results in a crash as well. Also FireFox on Android could not detect when the renderMap had finished drawing by using either on load or on idle events. This would cause the process to hang.

I also experimented with changing the default size of the canvas built into mapboxgl.js (400 X 300 respectively) to see if I could start out with a large size and circumvent calling resize() on the renderMap but the dpi cannot be updated this way. Setting the device pixel ratio (to 300) prior to creating the renderMap results in a crash as well. Using the html2canvas plugin on the canvas resulted in a crash on Android too.

I don't mean to deviate but I also used the leaflet-image plugin(which uses nothing but pngs from tilelayers) with your application format and the print process doesn't crash on Android except when the dimensions get very large. But as you probably well know rasters can take hours if not days to generate and take up excessive amounts of storage and are not always easy to work with.

Let me know if you have any ideas on potential solutions. Thanks again for the plugin. It works great on the desktop.

[mpetroff]

It was never intended for use on mobile, since it's for content creation, and mobile devices are generally only used for content consumption. I've certainly never tested it on mobile before, although there's no particular reason why it shouldn't work.

I did test it now on my Android phone, and it worked fine in both Firefox and Chrome. This suggests a buggy WebGL implementation / graphics driver on your device. From my experience with Pannellum, debugging this sort of issue is generally problematic.

However, there may be a simpler explanation. If you visit https://webglreport.com/ on your Android device, what is the reported max texture size? If it's 2048, that may explain the issue.

[hjrobinson]

Thanks for the link. My max texture size is 4096.

Did you increase the dimensions beyond the default 8 by 6?

On Mon, Jun 24, 2019 at 10:16 AM Matthew Petroff notifications@github.com wrote:

It was never intended for use on mobile, since it's for content creation, and mobile devices are generally only used for content consumption. I've certainly never tested it on mobile before, although there's no particular reason why it shouldn't work.

I did test it now on my Android phone, and it worked fine in both Firefox and Chrome. This suggests a buggy WebGL implementation / graphics driver on your device. From my experience with Pannellum https://pannellum.org/, debugging this sort of issue is generally problematic.

However, there may be a simpler explanation. If you visit https://webglreport.com/ on your Android device, what is the reported max texture size? If it's 2048, that may explain the issue.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mpetroff/print-maps/issues/20?email_source=notifications&email_token=AHCFUEYWDB3KO3DNWOT3EHTP4D6NXA5CNFSM4H24CZM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYNTPNQ#issuecomment-505100214, or mute the thread https://github.com/notifications/unsubscribe-auth/AHCFUE7OK3B62DWTXDNNA43P4D6NXANCNFSM4H24CZMQ .

[hjrobinson]

Also, if it still works when you increase the dimensions could you let me know what model of phone you are using. It would help me a lot.

On Mon, Jun 24, 2019 at 10:16 AM Matthew Petroff notifications@github.com wrote:

It was never intended for use on mobile, since it's for content creation, and mobile devices are generally only used for content consumption. I've certainly never tested it on mobile before, although there's no particular reason why it shouldn't work.

I did test it now on my Android phone, and it worked fine in both Firefox and Chrome. This suggests a buggy WebGL implementation / graphics driver on your device. From my experience with Pannellum https://pannellum.org/, debugging this sort of issue is generally problematic.

However, there may be a simpler explanation. If you visit https://webglreport.com/ on your Android device, what is the reported max texture size? If it's 2048, that may explain the issue.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mpetroff/print-maps/issues/20?email_source=notifications&email_token=AHCFUEYWDB3KO3DNWOT3EHTP4D6NXA5CNFSM4H24CZM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYNTPNQ#issuecomment-505100214, or mute the thread https://github.com/notifications/unsubscribe-auth/AHCFUE7OK3B62DWTXDNNA43P4D6NXANCNFSM4H24CZMQ .

[hjrobinson]

The first phone I tested was fairly old Android 4.4.2. I tested your site on a phone with version 7.7.1 and the crash did not occur although scrolling the phone during the map generation of a 13X13 png caused a crash on Chrome on Android.

[mpetroff]

I tried going up to 16" x 16" @ 300dpi, and it still worked fine. It's a modern Android device running Pie.

Your issues all sound like a combination of buggy WebGL implementations / graphics drivers and insufficient GPU resources (texture size support is the only part that can be reasonably checked). This is not something that can easily be fixed, and I have no intention of spending any time on it (although pull requests would be accepted). As you said, it works fine on desktop, and that's all I really care about for this utility.