1147352 - Webpage not rendering properly - El Confidencial

Status: RESOLVED DUPLICATE of bug 1149160

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

Description

[Karen Rudnitski [:kar]]

Attachment: chrome el confidential Screenshot_2015-03-25-12-06-00.png

A partner reported this bug as a website that isn't rendering properly (www.elconfidencial.com)

Can we see what's going on here? Take a look at it in both portrait as well as landscape. I'm using a Nexus 5 myself. The title (El Confidencial) is overlayed on top of the hamburger menu button.

Check out the same website on Chrome - it looks a lot better there - nothing overlays and all of the menu / submenu items look right.

Comment 1

[Karen Rudnitski [:kar]]

Attachment: Firefox el confidential Screenshot_2015-03-25-12-06-33.png

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

Probably a web-compat issue. NI'ing Mike to take a peek.

Comment 3

[Mike Taylor [:miketaylr]]

Yeah, apparently elconfidencial.com is using some kind of mobile-device optimizing framework called Marfeel.

They've got a script which does UA detection which determines if they re-purpose the page or not. See https://gist.github.com/miketaylr/22b5064d813f3575b679#file-gistfile1-txt-L20 (minified version @ http://bc.marfeel.com/statics/marfeel/gardab.js) for the Android sniffing. 

We basically fail by not having an Android version token in our UA (and even if we did, it would only work for Android 4+ phones).

Opening elconfidencial.com in Chrome there's a cheeky recruiting message in the console which says:

> Send an email to [e-mail] to become part of the family and help us build a better Web!  

So that's probably a good place to reach out to and ask about fixing their mobile detection. I would suggest they either special-case Firefox mobile detection (which would be good for Firefox OS users), or make the version stuff optional--depending on what they're trying to accomplish.

Comment 4

[Karl Dubost💡 :karlcow]

To better understand what is happening, there are two types of navigation. 

* Up and down in the current page context
* Left and right to access a new "page" context

Creating a Firefox User-Agent with a version number for Android doesn't solve the issue. 
So there's more than that. Also faking a Chrome UA on desktop doesn't give us the mobile version on Gecko.



# With CHROME MOBILE UA on Gecko
================================

 I see things like 

06:28:59.736 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ www.elconfidencial.com:1:0
06:28:59.771 An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing www.elconfidencial.com:1:0
wyciwyg://21/http://www.elconfidencial.com/
06:29:00.879 ReferenceError: ga is not defined main.s.js:84:32378
http://www.elconfidencial.com/


There is also this script: 
The 6th request is 
http://bc.marfeel.com/statics/marfeel/gardab.js
The script once un-minified 
https://gist.github.com/karlcow/4c69bde1c9620538eb94

but then
http://www.elconfidencial.com/javascript/big_data/libs/ua-parser.js
Cookie: FromMarfeel=NO; MarfeelGarda=YES; MarfeelKrks=0; MarfeelCreation=1427664790231; FromMarfeelOnError=NO; FromMarfeel=NO; fromt=NO
The script once un-minified 
https://gist.github.com/karlcow/18d133f65e4461887309
This one identifies Firefox OS and Firefox Android correctly.

A little bit after the site tries to  reload the context with
http://www.elconfidencial.com/?retry=1

Then a third time
http://bc.marfeel.com/www.elconfidencial.com/index?retry=1&marfeeldt=s



# With Chrome or iOS UA on Blink Rendering engine
=================================================
We get the right version, I wonder if there are additional tests tied to the rendering engine.

Also in http://bc.marfeel.com/www.elconfidencial.com/index?marfeeldt=s
there is also a script similar to gardab.js
https://gist.github.com/karlcow/62b3ce37dae99ebdec6e


This script also does a lot of detection with the same group of devices. Some detections are made for swiping right/left and scrolling.
http://bc.marfeel.com/statics/www.elconfidencial.com/index/main.s.js?build=6173



The gardab.js is trying to match on 
* iOS
  var e = /.*(iPad|iPhone|iPod).*OS ([0-9])_([0-9]).*/g,
* Android Chrome
  var e = /.*Android ([0-9])\.([0-9]).*; (.*) Build.* (Chrome|.+)\/.*? (Mobile|.+ )?.*Safari/g,
* BlackBerry 10
  var e = /.*BB10; ([\d\w]*)\).*Version\/(\d*)\.(\d*)\..*Mobile.*/g,
* Silk
  var e = /\bSilk\b/g;

Comment 5

[Karl Dubost💡 :karlcow]

Sent an email to Marvel.

=============
I'm working for Mozilla on Web Compatibility issues (including Mobile).

We have an open bug about a customer of yours using Marfeel framework: El Confidencial.
Trying to track down the issue, we found that the framework had a very limited set of browsers for the mobile version. 

We would like to know if there are any plans to make it more compatible with Mobile devices in general (and specifically with Firefox Android/Firefox OS). Was there any specific difficulties tied to some Mobile devices. And how Mozilla could help with that?

The full bug report is here.
https://bugzilla.mozilla.org/show_bug.cgi?id=1147352

Best Regards.
=============

Comment 6

[Karl Dubost💡 :karlcow]

We might want to change this issue as a marfeel one. Or create a new issue for the dependency. 

Mike,
we still need to figure out why we don't get the right cookies. 
I have the feeling it's not only the UA.

A bit hard to analyze with the current webdev tools because the document.write rewrite the context of the page and then the initial scripts disappear.

Comment 7

[Karl Dubost💡 :karlcow]

Initially marfeel script is triggered by:

    <script type="text/javascript">
    window.mrf = {
        host: 'bc.marfeel.com',
        dt: 's',
        blacklistedUrls: ['www.elconfidencial.com/mercados/indice', 'www.elconfidencial.com/mercados/cotizacion', 'www.elconfidencial.com/tags', 'www.elconfidencial.com/autores']
    };
    (function(e, t) {
        var n = new XMLHttpRequest;
        n.open("GET", "//bc.marfeel.com/statics/marfeel/gardab.js", false);
        n.send();
        if (n.status === 200) {
            var r = e.getElementsByTagName("script")[0],
                i = e.createElement("script");
            i.innerHTML = n.responseText;
            r.parentNode.insertBefore(i, r);
        }
    })(document, window);
    </script>

Comment 8

[Karl Dubost💡 :karlcow]

They are based in Barcelona. 
And they were at MWC this year.



Contact Us
    [e-mail]
    Rambla Catalunya 35, Principal 08007 Barcelona
    es: + 34 93 178 5950 · us: [phone]
    https://twitter.com/marfeel

Luke Moreland
[e-mail]


They do not use their framework on their own Web site.

Some context:
> Across the Atlantic, Marfeel has OnSwipe (NYC) and Pressly (Canada) as adversaries.
http://www.barcinno.com/better-know-a-barcelona-startup-marfeel/

In the article, they cite:
> Expansion, CincoDias, Vozpopuli, Sport, Publico.es, El Periodico, 20 Minutos, Gala (in France) and these are early days. 
On these Expansion, Cincodias, Sport, Publico.es, El Periodico, 20 Minutos, Gala: They do NOT use anymore marfeel, it seems.


Other sites using Marfeel and then failing in 
    Windows Phone, 
    Opera (Blink, Presto) 
    Firefox Android
    Firefox OS  
    and probably others
because of the framework:

* http://vozpopuli.com/
* http://www.belleamour.co.uk/
* http://www.confessionsofanover-workedmom.com/
* http://www.the-socialites-closet.com/
* http://www.capital.fr/

Comment 9

[Mike Taylor [:miketaylr]]

I just filed Bug 1149160 to track the investigation, thanks Karl.

Comment 10

[Karl Dubost💡 :karlcow]

Nothing has changed on this front.