884852 - cheezburger.com doesn't display correctly in Gaia browser, due to min-width:320px in media query

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[efrat]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Steps to reproduce:

Browsed to "http://www.cheezburger.com/" from Gaia browser

Tested on Firefox OS simulator
OS version 1.1.0.0-prerelease
Build Identifier 20130522133646

User Agent String is:
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36


Actual results:

In the simulator - The site uploads as a desktop site and not mobile adjusted

On a device - The site uploads as a desktop site and not mobile adjusted (same)



Expected results:

The web page should have been displayed

Comment 1

[Olivier C.]

I can't reproduce on Geeksphone Peak, I have the mobile adjusted website.


Tested on : Geeksphone Peak 
OS version : 1.2.0.0-prerelease
Build Identifier : 20130815082547
UA String : Mozilla/5.0 (Mobile; rv26.0) Gecko/26.0 Firefox/26.0

Comment 2

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

I see the problem in Fx OS (1.1) - sort of. In portrait mode, I get the main toolbar from the desktop site, and it doesn't look or work well. However, surprisingly, in landscape mode the site switches to a "mobile" main toolbar which at least looks better - not sure if it's fully functional. Looks and works fine in Firefox Android.

Comment 3

[Mike Taylor [:miketaylr]]

Yeah, I see the same as you Hallvord on my Peak (1.1).

Looking at http://andreasbovens.github.io/understanding-viewport/meta-widthdevicewidth.html I see:

screen.width: 315
window.outerWidth: 315
window.innerWidth: 317
document.documentElement.clientWidth: 317

Ignoring the fact that outerWidth < innerWidth (is that normal?), there's some "mobile-ish" styling that isn't applying due to this media rule:

https://s.chzbgr.com/s/release_20130916.3/css/libs/chzboot/responsive.less:
/*
** 
** historically this file name (320-767) had style units in "em" instead of %
** and seems to have assumed that a default 16px font-size
** of 20em-47.938em equates to 768-1280 
** now default font-size seems to be 14px
** so we're gonna use min-width and max-with based on assumed pixel target
**
*/

@media (min-width: 320px) and (max-width: 767px) {
  .subnavbar {
    display: none;
  }
  ... continue with mobile styles

So when you flip the orientation the rule matches.

Comment 4

[Karl Dubost💡 :karlcow]

Cheezburger.com in portrait mode, I get the mobile site. on Firefox ZTE device.
I wonder why they have a min-width there.

Comment 5

[Karl Dubost💡 :karlcow]

Contacted with http://support.cheezburger.com/support/tickets/new

Ticket is at http://support.cheezburger.com/support/tickets/13757
Suggested to remove the min-width.

Comment 6

[Meni]

We're gonna open a ticket about it Gaia compatibility, but any of you guys see it anywhere in the results on FxOS?

Comment 7

[Karl Dubost💡 :karlcow]

(In reply to Meni from comment #6)
> We're gonna open a ticket about it Gaia compatibility, but any of you guys
> see it anywhere in the results on FxOS?

Could you give a bit more details on what you mean or what you would like?

Comment 8

[Karl Dubost💡 :karlcow]

The issue is still there. 
Trying to contact a developer
http://twitter.com/MozWebCompat/status/451983024368799744

Comment 9

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

I think it's more about backend sniffing at this point. I've tested with emulation of various screen sizes/resolutions and I don't see any difference at 320. There is however a difference in the returned source code, and the desktop-ish version they send to Firefox OS isn't attempting to be responsive at all AFAIK.

Smallest response has Content-Length: 23128
Largest response has Content-Length: 28363
Selected HTTP response headers (Firefox OS, Firefox on Android, Safari on iPhone):

Response for: 'Mozilla/5.0 (Mobile; rv:30) Gecko/30 Firefox/30'
Response Status: 200
content-length: 28363
content-type: text/html; charset=utf-8

Response for: 'Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0'
Response Status: 200
content-length: 23155
content-type: text/html; charset=utf-8

Response for: 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.
Response Status: 200
content-length: 23128
content-type: text/html; charset=utf-8

Comment 10

[Karl Dubost💡 :karlcow]

Their issue tracker doesn't allow me to log again. So more brokenness.
http://support.cheezburger.com/support/tickets/13757

Let's see the twitter address we used for contacting is barely updated and not since March, so maybe another dead lead. Their blog is active http://blog.cheezburger.com/
The main author is evrobinson (if a real name). Seattle-based company.
Ok it sounds like http://www.linkedin.com/in/robinsonevan but no obvious way of contacting.

Maybe the CEO https://twitter.com/benhuh
http://twitter.com/MozWebCompat/status/460613701473533952

Comment 11

[Karl Dubost💡 :karlcow]

For the HTML the difference seems minimal.

→ http -b http://www.cheezburger.com "User-Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0">/tmp/foo1.txt;http -b http://www.cheezburger.com "User-Agent: Mozilla/5.0 (Android; Mobile; rv:30.0) Gecko/30.0 Firefox/30.0">/tmp/foo2.txt;git diff /tmp/foo1.txt /tmp/foo2.txt


diff --git a/tmp/foo1.txt b/tmp/foo2.txt
index fa95b85..e313627 100644
--- a/tmp/foo1.txt
+++ b/tmp/foo2.txt
@@ -41,12 +41,20 @@
     <script src="https://s.chzbgr.com/s/release_20140424.291/js/libs/modernizr.min.js" type="text/javascript"></script>
     
     <script id="chz-configs" type="application/json">
-       {"ClusterSiteId":null,"ContextualSiteId":null,"ProfileDomain":"http://profile.cheezburger.com","SiteName":"Dashboard","SitePath":"/","PathWithoutPage":"/","Verti
+       {"ClusterSiteId":null,"ContextualSiteId":null,"ProfileDomain":"http://profile.cheezburger.com","SiteName":"Dashboard","SitePath":"/","PathWithoutPage":"/","Verti
 </script>
 </head>
 <body class="proxima fall2013">
     
              
+        <div class="smart-banner platform-android">^M
+            <img class="icon" src="https://s.chzbgr.com/s/release_20140424.291/img/app_icons/ic_launcher_cheezburger72.png" />^M
+            <div class="meta">^M
+                <span class="name">Get the official app now</span>^M
+            </div>^M
+            <a href="http://bit.ly/VM2aDO" class="btn btn-chz" target="itunes_store">Free</a>^M
+            <a href="#close" class="close">&times;</a>^M
+        </div>^M
 
 
 
@@ -1325,7 +1333,7 @@ Via: <a target='_blank' class='alt' href='http://www.nytimes.com/interactive/201
 
 
 
-        <div id="ad-mobile-300-7ef45a48-b0b3-4c82-abf7-caed0c229d17" class="js-ad ad ad-mobile-instream-300x250" data-adtype="DASHTEST_300_MOBILEWEB_HP" data-adsize="[[
+        <div id="ad-mobile-300-6a4c8dcf-0f9b-4b43-b82a-5563fad618fc" class="js-ad ad ad-mobile-instream-300x250" data-adtype="DASHTEST_300_MOBILEWEB_HP" data-adsize="[[
                                   
     </div>
             <div class="content-card">


And Firefox OS seems to receive the same content than Android.
Tested on the device we receive the same thing.

In fact I have the feeling the issue is solved.

Comment 12

[Ran Ben Aharon [:ranbena] EverythingMe]

We at EverythingMe consider this issue solved :)

Comment 13

[Karl Dubost💡 :karlcow]

Let's close it.

Comment 14

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

I see this problem again. Reopening.

Comment 15

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

Don't know if the problem is exactly the same - needs a new analysis, but Fx OS sure gets the desktop UI here.

Comment 16

[Karl Dubost💡 :karlcow]

Same issue. (Easy to test with the responsive design view mode of Firefox Developer Tools)
320 pixels and above receive the mobile content.
319 pixels and below receive the desktop content. 
We need to contact them again.

In their https://s.chzbgr.com/s/release_20140711.493/css/libs/chzboot/responsive.less
Not sure why they put a min-width.

/* Phone Devices */

/*
** 
** historically this file name (320-767) had style units in "em" instead of %
** and seems to have assumed that a default 16px font-size
** of 20em-47.938em equates to 768-1280 
** now default font-size seems to be 14px
** so we're gonna use min-width and max-with based on assumed pixel target
**
*/

@media (min-width: 320px) and (max-width: 767px) {
  .subnavbar {
    display: none;
  }
  .navbar .brand {
    display: block;
    padding: 0;
    font-size: 20px;
    font-weight: 200;
    line-height: 1;
    color: white;
    position: absolute;
    left: -6px;
    top: 5px;
    z-index: 1;
    width: 78px;
    height: 57px;
    background: url("../../../img/super_site_logos.png") no-repeat -162px -177px;
    text-indent: -999em;
    overflow: hidden;
  }
… etc.

Comment 17

[Karl Dubost💡 :karlcow]

They have a github account
https://github.com/cheezburger
with only one member
https://github.com/wuj818

Another dev, Front End Senior. 
http://www.linkedin.com/in/jhenryrose
http://www.henryrose.info/blog/
https://twitter.com/henryrose


Ben Huh is the CEO.
https://en.wikipedia.org/wiki/Ben_Huh


Let's try with Henry Rose who should be the closest of the issue.
http://twitter.com/MozWebCompat/status/488477819949678592

Comment 18

[Karl Dubost💡 :karlcow]

fixed.