Web-bugs: express.grab.com - Map widget is not visible

[reinhart1010]

URL: https://express.grab.com

Browser / Version: Firefox Mobile 69.0
Operating System: Android
Tested Another Browser: Yes

Problem type: Design is broken
Description: Google Maps widget is not visible. (See screenshots)
Steps to Reproduce: Visit the site

Note: This site is a shortlink service to Grab's delivery tracking service. The original URL should be https://express.grab.com/<Shortlink ID>, which contains sensitive data (booking ID, driver's license plate, contact number, as well as origin and final destination) hence redacted on the screenshots. Each shortlink will expire once the delivery is completed, and will redirect to the error page at https://express.grab.com/track/error.

This issue is also reproducible on Firefox for Android (Fennec and Fenix).

[reinhart1010]

So on div[id="root"] > div > div[class="main-view__map___2o1G4"] we have the following CSS properties (Source)

height: 100vh;
height: -moz-available;
height: -webkit-fill-available;

Here Firefox filters out 100vh for -moz-available, which is unsupported for use with height as of bz567039.

Removing it fixes the issue.

[softvision-oana-arbuzov]

Thanks for the report @reinhart1010 , unfortunately I don't have access.

Since you were able to find a solution I will move it to Needsdiagnosis for further investigation.
@karlcow could you have a look on this?

[reinhart1010]

@softvision-oana-arbuzov from the screenshot you'll see that the original URL was https://express.grab.com/L8sqIEM. To generate another one you need to book an actual GrabExpress order which is only available on Southeast Asia.

This site's issue only occurs when the driver is on the way to the destination, so that's why I conducted a quick diagnosis before the link expires.

At the meantime, the source CSS file is still available on production..

Moving to needscontact as the fix have been found.

[softvision-oana-arbuzov]

Thanks @reinhart1010 for your input.

[reinhart1010]

Contacted via Twitter

I think it's worthy to ping @Grab engineers here.

[reinhart1010]

This issue is still reproducible, though a representative from Grab have replied to the tweet.

[softvision-oana-arbuzov]

Any news @reinhart1010 on this?

[reinhart1010]

Not yet, but I am still waiting to revisit the site on the next GrabExpress order.

[softvision-sergiulogigan]

Ping @reinhart1010

[reinhart1010]

Visited https://express.grab.com/track/expired.

They still include the troubled CSS in their app, with the new CSS URL: https://express.grab.com/track/app.7c902cf740249340d42b.css

One noticeable change between this and the old one (https://express.grab.com/track/app.4794883c598467cde53a.css) is that they are swapping Google Maps for Mapbox (Sidenote: Grab is one of main sponsors of OpenStreetMap).

Additional investigation throughout the CSS is that this site uses React and a modified version of Ant Design Pro.

[reinhart1010]

Nevertheless, this issue has been fixed

Tested on Firefox 76.0.1, Ubuntu 20.04