Closed Bug 784463 Opened 8 years ago Closed 3 years ago

bankofamerica.com - Firefox Android receives desktop site instead of mobile site

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: lmandel, Assigned: adamopenweb)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [sitewait] [serversniff] [country-us])

Attachments

(3 files)

Attached image Sign in page in Fennec
Clicking the Mobile Banking Sign In option on the bankofamerica.com mobile site redirects to a non mobile site. This appears to be due to UA sniffing. Spoofing the UA to the Android stock browser results and clicking on the link results in the correct mobile sign in page being displayed.
Component: Evangelism → Mobile
Product: Firefox for Android → Tech Evangelism
Version: Firefox 15 → unspecified
So BOA..
1) Firefox on Android gets a very simplified mobile site (more like a WAP version)
2) Firefox on FirefoxOS gets a desktop site
Whiteboard: [contactready][serversniff][country-us]
See Also: → 762967
Duplicate of this bug: 762967
There are a set of redirections for iOS.

iOS https://www.bankofamerica.com/ 
    → 302 https://www.bankofamerica.com/mobile/banking-wap.go 
    → 302 https://www.bankofamerica.com/mobile/banking.go
    → 200 

The final page received is full of JavaScript with predefined data model using things like 
https://www.bankofamerica.com/pa/components/bundles/gzip-compressed/xengine/mobile-web-dotcom/1.0.2/script/mobile-web-dotcom-jawr.js



Let's try with Firefox OS

FOS https://www.bankofamerica.com/ 
    → 200 

The page seems to be the desktop page.


Let's try with Firefox On Android

FAN https://www.bankofamerica.com/ 
    → 302 https://www.bankofamerica.com/mobile/banking-wap.go 
    → 200 

The page is a very basic HTML page saying:

> This Mobile Banking website is no longer accessible on mobile phones like the one you're using, but you can still access your Bank of America accounts on this device conveniently and securely

They propose text messaging. :)
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [contactready][serversniff][country-us] → [contactready] [serversniff] [country-us]
From the site on iOS. if you click on sign-in button, 
you get redirected to https://staticweb.bankofamerica.com/mweb/common/index.html#signin?app=signon

On Firefox OS (desktop site), there is the sign-in form on the front page. If we go to contact us, you are asked to select the "states", then [Go], then "Mobile and Text Banking", then you can access a link to https://secure.bankofamerica.com/login/sign-in/signOnScreen.go which is a desktop page.

On Firefox Android (simple web page), if we enter manually 
https://secure.bankofamerica.com/login/sign-in/signOnScreen.go
we get the same desktop page.
They advertise the mobile Web site at 
https://www.bankofamerica.com/online-banking/mobile-internet-banking.go

It seems that only Bank of America customers can easily contact the company.
https://www.bankofamerica.com/contactus/contactus.go?topicId=mobile_text_banking

> Email us
> 
> Online Banking customer? Sign in to online banking, go to the Help 
> & Support menu, select Contact us, choose a topic and then click 
> Send a message.
Reached out on twitter:

@BofA_Help Hi, would you know who to contact about web site issues? See https://bugzilla.mozilla.org/show_bug.cgi?id=784463 … for details.
Whiteboard: [contactready] [serversniff] [country-us] → [sitewait] [serversniff] [country-us]
Assignee: kdubost → astevenson
Was directed to a 1-800 number. Called the tech support and they didn't have a contact to provide. It was suggested that I use the website feedback form, so I did. I left my email address with the support person as well.
Received a response from their UI Architect. Provided some details regarding the issues found.
Response: planning to address this gap in 2014 and retire WAP routing logic. Will get back with timing and design details once they have started the process.
Hello Adam,
Our mobile web team put in an update in the February release to serve up our mobile web experience to FF mobile customers.
Can you test it out and let us know if the issue is now resolved?
Firefox for Android is redirected to the mobile site and it works. Checked the menu and some content pages, seems ok.

Enroll page: The get started and enroll buttons are small, compared to what we get in chrome.
Sign-in page: Directs to the same page as Chrome but it is not scaled properly, very small and has alert message "Service not available. Try again later."

Firefox OS is still being directed to the desktop site. When we force FFOS to mobile site, works ok. Same results and bugs as Firefox Android.

Odd behavior: On FFOS simulator the sign-on page scales properly for mobile, on a device its too small which is what I expect as Firefox Android does the same https://staticweb.bankofamerica.com/mweb/common/index.html#signin?app=signon
Flags: needinfo?(miket)
Viewport is messed up generally, even for the homepage.

body,#page,#header{
	width:320px;
}

Changing this to be 100% (or just removing it) allows the content to expand to the width of the viewport.

The carousel is expecting to be 320px:
.mw-csm-hps{
	width:320px;
} (changing this exposes other sliding content, though)

However, when spoofing as Firefox for Android in Chrome, the app always expands to the width of the viewport. 

As for https://staticweb.bankofamerica.com/mweb/common/index.html#e0?app=enrollments (the enrollment page)--it seems like meta viewport is failing to apply for some reason. Will try to reduce further.
In https://staticweb.bankofamerica.com/mweb/common/js/mobileweb.js,

$(document).ready(function() {
    getUserBrowser();
    setEnvironment();
    globalObj.viewport = document.querySelector("meta[name=viewport]");
    if (globalObj.isNative || globalObj.isWebView) {
        globalObj.viewport.setAttribute("content", "width=device-width; initial-scale=1.0; maximum-scale=1.0");
    } else {
        globalObj.viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0");
    }

...

Kats, is it possible to change the viewport dynamically here (at doc.ready)? According to this article [1], it wasn't possible in Fennec in 2011. Goofing around with the script I can really only get it to behave if I put in the meta element in the HTML (which might not be a bad suggestion for BOA--they're using the same values for both conditions).

[1]http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
I thought we did support that but looking at our code it seems we only listen for new meta elements being added, not removal of meta elements or modifications of existing meta elements. The code around [1] probably needs to be updated to listen for more events.

[1] http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js?rev=267e352db60c#5803
Flags: needinfo?(bugmail.mozilla)
Thx Kats, I can file an issue on that (and write some simple test cases).

In the meantime, we can suggest to Bank of America that the most compatible solution right now would be to include the meta viewport directly in the HTML (at https://staticweb.bankofamerica.com/mweb/common/index.html). Right now it looks like this:

> <meta name="viewport" />

If they change it to:

> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

It will look nicer everywhere (and they could remove the conditional that updates the viewport via JS to the same thing for either condition).
See Also: → 976616
See Also: → 976618
With Firefox Android still the same issue.

15:32:16.089 GET https://www.bankofamerica.com/ [HTTP/1.0 302 Found 23621ms]
15:32:39.759 GET https://www.bankofamerica.com/mobile/banking-wap.go [HTTP/1.1 302 Found 1944ms]
15:32:41.695 GET https://www.bankofamerica.com/homepage/overview.go [HTTP/1.1 200 OK 584ms]
In the end we reach https://www.bankofamerica.com/homepage/overview.go?MobileRedirect=false

While Chrome Mobile Android gets
15:36:50.146 GET https://www.bankofamerica.com/ [HTTP/1.0 302 Found 1113ms]
15:36:51.285 GET https://www.bankofamerica.com/mobile/banking-wap.go [HTTP/1.1 302 Found 610ms]
15:36:51.883 GET https://www.bankofamerica.com/mobile/banking.go [HTTP/1.1 200 OK 606ms]

The Mobile site is working on Firefox and doesn't show at first sight any compat issues.

https://www.linkedin.com/in/timothymacintyre
Maybe this person could help, I sent an email.
The contact responded and found out the team who was in charge internally. Big big thanks To Timothy for this. Let's hope we will make progress on that.
See Also: → 1265258
Changing the title to better reflect the issue
Summary: Clicking Mobile Banking Sign In on BOA site redirects to non mobile site → Firefox Android receives desktop site instead of mobile site
This is what Bank of America looks on GECKO when faking the Chrome user agent.
Aka it's working.
If the site (beyond the home/log-in page) actually works, we should UA override here. But we need someone to test.
Summary: Firefox Android receives desktop site instead of mobile site → bankofamerica.com - Firefox Android receives desktop site instead of mobile site
We get a mobile optimized site now.
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.