964612 - www.slate.fr has broken layout in Firefox OS

Status: VERIFIED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: 079.png

My impression on this one is that the CSS applies to certain class values which are set dynamically through the user agent identification.

They also use the framework from Financial Times.

To investigate further. The site is responsive but on Firefox OS on the device, it displays as desktop. On the other hand when I spoof the user agent on desktop to Firefox OS, the responsive site is working.

Mediaqueries with the screen of Firefox OS ZTE too small? Hmm doesn't work because when I rotate the screen it is not working.

Comment 1

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

Here I get some pretty standard backend browser sniffing that detects "Android" and loads m.slate.fr:

GET / HTTP/1.1
Host: www.slate.fr
User-Agent: Mozilla/5.0 (Android; Mobile; rv:27.0) Gecko/27.0 Firefox/27.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: nb-no,nb;q=0.9,no-no;q=0.8,no;q=0.6,nn-no;q=0.5,nn;q=0.4,en-us;q=0.3,en;q=0.1
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Pragma: no-cache

HTTP/1.1 302 http://m.slate.fr
Server: Varnish
location: http://m.slate.fr/
Accept-Ranges: bytes
Date: Tue, 28 Jan 2014 06:12:11 GMT
X-Varnish: 2154485141
Age: 0
Via: 1.1 varnish
Connection: close
X-Cache: MISS
Cache-Control: no-cache

------------------------------------------------------------------
GET / HTTP/1.1
Host: m.slate.fr
User-Agent: Mozilla/5.0 (Android; Mobile; rv:27.0) Gecko/27.0 Firefox/27.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: nb-no,nb;q=0.9,no-no;q=0.8,no;q=0.6,nn-no;q=0.5,nn;q=0.4,en-us;q=0.3,en;q=0.1
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Pragma: no-cache

HTTP/1.1 200 OK
Server: Apache
Cache-Control: no-cache
Last-Modified: Tue, 28 Jan 2014 06:12:12 +0000
Vary: Cookie
ETag: "1390889532"
Set-Cookie: slatemob=52271290; expires=Wed, 29-Jan-2014 06:12:13 GMT; path=/
Content-Type: text/html; charset=utf-8
Content-Length: 23940
Accept-Ranges: bytes
Date: Tue, 28 Jan 2014 06:12:13 GMT
X-Varnish: 2154485202
Age: 0
Via: 1.1 varnish
Connection: keep-alive
X-Cache: MISS

------------------------------------------------------------------
GET / HTTP/1.1
Host: www.slate.fr
User-Agent: Mozilla/5.0 (Mobile; rv:27.0) Gecko/27.0 Firefox/27.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: nb-no,nb;q=0.9,no-no;q=0.8,no;q=0.6,nn-no;q=0.5,nn;q=0.4,en-us;q=0.3,en;q=0.1
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Pragma: no-cache

HTTP/1.1 200 OK
Server: Apache
Cache-Control: no-cache
Last-Modified: Tue, 28 Jan 2014 05:59:08 +0000
Vary: Cookie
ETag: "1390888748"
Content-Type: text/html; charset=utf-8
Content-Length: 274230
Accept-Ranges: bytes
Date: Tue, 28 Jan 2014 06:13:28 GMT
X-Varnish: 2154489844 2154444132
Age: 859
Via: 1.1 varnish
Connection: keep-alive
X-Cache: HIT
X-Cache-hits: 125

------------------------------------------------------------------


m.slate.fr seems to work and render pretty much identically across mobile browsers.

Comment 2

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

There may be something more to it, because Compatipede doesn't seem able to load www.slate.fr with the Fx OS UA string. The backend may depend on certain headers or combinations..?

Comment 3

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

Slate seems to work fine on my phone now.

Comment 4

[Karl Dubost💡 :karlcow]

and so does slate.com