1011524 - online.citibank.co.in sends desktop site to Firefox OS

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Comment 1

[Karl Dubost💡 :karlcow]

Swarnava,
could you go to http://echo.opera.com/
and copy here the string which starts with "User-Agent: "


There are many instances of user agent sniffing on the client side for displaying banners for apps on iOS and Android in home.js.

An interesting difference.
If I emulate Firefox OS v30 on Desktop. I get a mobile Web site.
if I request the site on a Flame Firefox OS device, I get a blank page.

It's a different behavior than bug 843151

Comment 2

[Swarnava Sengupta (:Swarnava)]

User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Comment 3

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

This is a strange issue. I cant really find any evidence that Firefox OS gets different code (on the contrary) and the site seems to load and work fine in spoofing desktop and even the Firefox OS simulator.

Comment 4

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

There are some familiar suspects here, including jquery.flexslider and Zepto. The CSS file the site loads for mobiles is 312kB. And then there are some webfonts. I guess this is simply taking so many resources that the phone goes OOM..?

Comment 5

[Karl Dubost💡 :karlcow]

Probably.

Also when emulating Firefox OS UA on Firefox Desktop, we get at a point:

09:34:13.999 GET http://online.citibank.co.in/js/zepto.js [HTTP/1.1 200 OK 552ms]
09:34:14.493 mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

That said the site we receive on Firefox OS is slightly different too. It doesn't look like at all like the one we receive on Firefox Desktop with a fake UA (apart of the fact that it never finishes loading.)

Comment 6

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

> That said the site we receive on Firefox OS is slightly different too.

My impression is that the markup is the same, but the CSS differs, and maybe the JS does some extra "adaptation" (AFAIK both Flexslider and Zepto may change the DOM to adapt to mobiles, based on browser and/or screen size detection. Also note this in http://online.citibank.co.in/js/global.js :

    if (mobile.detect() || tablet.detect()) {
        css = "/css/devices.css"
    } else {
        if (screen.width < 800 && is_touch_device) {
            css = "/css/devices.css"
        } else {
            css = "/css/desktop.css"
        }

Comment 7

[Karl Dubost💡 :karlcow]

Oh! fixed.