mShots does not appear to render Mapbox embeds

[andrewserong]

It appears that mShots does not render Mapbox embeds. At first I thought this might be an issue with mShots not waiting long enough for JavaScript to complete executing, however we haven't managed to replicate the issue with other blocks. The hunch at the moment is that it's somehow particular to Mapbox and / or using <canvas>.

It looks like this on the front end of a real site:

pbYkd9-2R-p2

Via mShots it doesn't appear to finish loading before the screenshot is taken:

https://s0.wordpress.com/mshots/v1/https://andysfakeblockpatternsourcesite.wordpress.com/2021/01/29/test-map-layout/

@simison suggested in Automattic/wp-calypso#49101 that we might be able to adjust something in

mShots/lib/snapshot.js

Line 174 in 748a64f

const response = await page.goto( m_uri, { waitUntil: 'networkidle2' } ).

https://pptr.dev/#?product=Puppeteer&version=main&show=api-pagewaitfornavigationoptions

It's likely that this issue will be a blocker for a screenshots-based page layout picker in Calypso. Since this currently only affects one kind of block, it may not be a blocker, but would be a good thing to find a fix for eventually.

[ramonjd]

Do we know for sure that it's not waiting for full script execution?

Google maps load fine

But mapbox does not

Both maps are in an iframe, but mapbox uses <canvas />

[andrewserong]

Thanks for checking @ramonjd! I haven't been able to replicate this issue with any other blocks, so it might not be the full script execution issue at all, and could be something particular to Mapbox. I'll update the issue description to be more specific 🙂

[andrewserong]

Updated the description to indicate that it's particular to Mapbox and therefore lower priority than I originally thought.

[andrewserong]

It looks like the rendering issue via mShots might be resolved by upgrading Mapbox to > v2.1.0 (I suspect that the change in mapbox/mapbox-gl-js#10294 might have fixed it). Example url: https://s0.wp.com/mshots/v1/https://docs.mapbox.com/mapbox-gl-js/api/?vph=1200

The solution, then, will be to try upgrading Mapbox in Jetpack to see if that does the trick. I'll leave this issue open until we have a fix in place (also, just in case upgrading doesn't resolve the issue).

[simison]

@andrewserong did you look into this? I see Mapbox is v1 in Jetpack currently: https://github.com/Automattic/jetpack/blob/75476a589b68364b75ef3dcb4938309c1446356b/projects/plugins/jetpack/package.json#L123