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

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Lawrence Mandel [:lmandel] (use needinfo)]

Attachment: 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.

Comment 1

[Lawrence Mandel [:lmandel] (use needinfo)]

Attachment: Sign in page in Android stock browser

Comment 2

[Hallvord R. M. Steen [:hallvors]]

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

Comment 4

[Karl Dubost💡 :karlcow]

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. :)

Comment 5

[Karl Dubost💡 :karlcow]

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.

Comment 6

[Karl Dubost💡 :karlcow]

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.

Comment 7

[Adam Stevenson [:adamopenweb]]

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.

Comment 8

[Adam Stevenson [:adamopenweb]]

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.

Comment 9

[Adam Stevenson [:adamopenweb]]

Received a response from their UI Architect. Provided some details regarding the issues found.

Comment 10

[Adam Stevenson [:adamopenweb]]

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.

Comment 11

[Adam Stevenson [:adamopenweb]]

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?

Comment 12

[Adam Stevenson [:adamopenweb]]

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

Comment 13

[Mike Taylor [:miketaylr]]

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.

Comment 14

[Mike Taylor [:miketaylr]]

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

Comment 15

[Kartikaya Gupta (email:[e-mail])]

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

Comment 16

[Mike Taylor [:miketaylr]]

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).

Comment 17

[Karl Dubost💡 :karlcow]

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.

Comment 18

[Karl Dubost💡 :karlcow]

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.

Comment 19

[Karl Dubost💡 :karlcow]

Changing the title to better reflect the issue

Comment 20

[Karl Dubost💡 :karlcow]

Attachment: boa-fakechrome-fullpage.png

This is what Bank of America looks on GECKO when faking the Chrome user agent.
Aka it's working.

Comment 21

[Mike Taylor [:miketaylr]]

If the site (beyond the home/log-in page) actually works, we should UA override here. But we need someone to test.

Comment 22

[Mike Taylor [:miketaylr]]

We get a mobile optimized site now.