1512773 - Pottermore "view your patronus" experience doesn't happen in Firefox for Android

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Daniel Holbert [:dholbert]]

(not sure what component this belongs in)

STR:
1. Create an account at https://my.pottermore.com/ if you don't already have one.
(Just requires an email address)

2. Go to https://my.pottermore.com/patronus (and take the short quiz if you haven't already done so, and then visit this url again)

EXPECTED RESULTS:
An interactive animation should load, which prompts you to touch the screen and drag to summon your patronus.

ACTUAL RESULTS:
It just shows a static background image and says I've already discovered my patronus, and there's a button to return to my profile.

Chrome on Android gives EXPECTED RESULTS.
Firefox Nightly 65 on Android gives ACTUAL RESULTS.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of animated experience in Chrome (flying snake patronus)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of static scene that I get in Firefox

Comment 3

[Daniel Holbert [:dholbert]]

This does seem to be mobile-specific. I get "expected results" on desktop Nightly (including in responsive design mode w/ Galaxy S9 viewport-size + UA-string).

I poked around the mobile rendering with USB cable & WebIDE's DOM inspector, and I noticed that the ("actual") rendered content there is all inside of an element called
 <div id="DisplayFallback"  ...>

So this seems to be some "fallback rendering" after the site decides we don't support some API.

Comment 4

[Daniel Holbert [:dholbert]]

Yikes, it looks like they're explicitly UA-sniffing to *only* allow browsers that call themselves Chrome, *if* your platform is  Android.  At least, that looks like what this snippet of JS does:

>  this.useFallback = function() {
>    [...SNIP...]
>    if (Mobile.os == "Android" && Mobile.browser != "Chrome") {
>      return true
>    }
>    return false
(The above is a pretty-printed version of this JS file: https://patronus.s3.amazonaws.com/assets/js/patronus.js )

--> Reclassifying as Tech Evang | Mobile.

Comment 5

[Daniel Holbert [:dholbert]]

I just confirmed that a UA-spoofing-extension -- like https://addons.mozilla.org/en-US/android/addon/uaswitcher/ with Chrome-for-Android chosen in its settings -- makes this work great in Firefox on Android.

Comment 6

[Karl Dubost💡 :karlcow]

They have a form https://help.pottermore.com/hc/en-gb/requests/new

Comment 7

[Mike Taylor [:miketaylr]]

Thanks Karl and Daniel. I sent them an email there.

Comment 8

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 10

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 11

[Mike Taylor [:miketaylr]]

Daniel, when you get a chance, would you mind re-testing?

Comment 12

[Daniel Holbert [:dholbert]]

Sure -- yeah, I still see the issue.

You actually don't have to log in to trigger the issue, too -- there's a version of it on the logged-out version of https://my.pottermore.com/patronus :

STR:

1. Visit https://my.pottermore.com/patronus
2. Wait for page background to load.

EXPECTED RESULTS:

• "Better with headphones" displays during pageload, and spooky chimes audio should start playing.
• Page background should have an animation of a stag walking through the forest.

ACTUAL RESULTS:

• No audio or message about headphones.
• Page background just shows a static dark forest scene, without animation.

I get EXPECTED RESULTS (using these STR as well as those from comment 0) in at least these browsers: Firefox on Desktop, Chrome on Android, and Firefox Nightly on Android with a spoofed Chrome UA string.

I get ACTUAL RESULTS in Firefox Nightly on Android with the default UA string.

Comment 13

[Mike Taylor [:miketaylr]]

Thanks Daniel. I'll try to find a better contact.

Comment 14

[Mike Taylor [:miketaylr]]

Got a reply from the head of product development:

Thanks for raising this issue. I've passed it onto our engineering team who take a look at it in due course.

Comment 15

[Mike Taylor [:miketaylr]]

This still reproduces. I noticed that the JS file at https://patronus.s3.amazonaws.com/assets/js/patronus.js has a link for a creative agency... which might be Pottermore engineering might not own the code here.

Comment 16

[Oana Arbuzov [:oanaarbuzov]]

The issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly 100.0a1 (🦎 100.0a1-20220314094248)
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Comment 17

[Raul Bucata]

The issue still reproduces.

Tested with:

Browser / Version: Firefox Release 109.2.0 (2015930059-🦎109.0.1-20230127170202🦎)/ Firefox Nightly 111.0a1 (2015932395-🦎111.0a1-20230208095231🦎)/ Chrome Mobile Version 109.0.5414.117
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome.