733920 - Basecamp renders a desktop site for Firefox OS

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Jason Smith [:jsmith]]

Attachment: Webkit Basecamp Site

Steps:

1. Go to https://launchpad.37signals.com/basecamp/signin
2. Login with an account with a project pre-created in basecamp (if you need a test account, ping me on IRC for one)

Expected:

A mobile site that is app-like should render (see example screenshot attached).

Actual:

A desktop site renders instead for fennec native.

Comment 1

[Jean-Yves Perrier [:teoli]]

Jason, have you tried to log to this Web site faking the UA for an Android or iOS browser?

Does the Web site work then in Firefox for Mobile (native)? 

(We need that information to reach them with as much information as possible)

Comment 2

[Jason Smith [:jsmith]]

Attachment: Basecamp IPhone UA on Fennec Native

Comment 3

[Jason Smith [:jsmith]]

Just tested on Fennec Native with UA faked to the IPhone. The site does not work on Fennec Native with the UA faked (see attached screenshot).

Comment 4

[Jason Smith [:jsmith]]

Note: The mobile-based app for basecamp that runs on a webkit-based UA has webkit-specific prefixes with no correlating moz-prefixes. Examples prefixes seen are:

-webkit-transform: translate3d(0,0,0);
-webkit-font-smoothing: antialiased;
-webkit-transform: none !important;
-webkit-text-size-adjust: none;
-webkit-background-size: 140px 114px;
-webkit-transform: none !important;
-webkit-background-size: 684px 57px;
-webkit-transition: opacity 150ms ease-in 150ms;

    /* LESS.CSS can't parse @-wekit-keyframes so this has to go here */
    @-webkit-keyframes loading-highlight {
      from {background-position: -300px 0;}
      to {background-position: 300px 0;}
    }

    @-webkit-keyframes highlight {
      from {background-color: #ff3;}
      to {background-color: #fff;}
    }

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
      -webkit-border-radius: 6px;
      -webkit-box-shadow: 1px 1px 1px #fff;

-webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.4, #ccc))

Comment 5

[Jason Smith [:jsmith]]

Another way at looking at the CSS-prefixes in comment 4:

Webkit-only Feature Only

* -webkit-font-smoothing

Moz & Webkit Supported

* -webkit-transform (equilvalent: -moz-transform)
* -webkit-text-size-adjust (equilvalent: -moz-text-size-adjust)
* -webkit-background-size (equilvalent: -background-size)
* -webkit-transition (equilvalent: -moz-transition)
* -webkit-keyframes (equilvalent: -moz-keyframes)
* -webkit-gradient (equilvalent: -moz-linear-gradient)
* -webkit-border-radius (equilvalent: -border-radius)
* -webkit-border-shadow (equilvalent: -box-shadow)

Comment 6

[Jason Smith [:jsmith]]

> Webkit-only Feature Only
> 
> * -webkit-font-smoothing
> 
Update on this - gecko's equilvalent is non-standard (font-smooth)

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: chrome.png

Screenshot in Chrome.

Comment 8

[Mike Taylor [:miketaylr]]

Attachment: fx25.png

Screenshot in Firefox for Android 25.

Comment 9

[Karl Dubost💡 :karlcow]

Contacted their site support internally.

Comment 10

[Karl Dubost💡 :karlcow]

I got an answer saying that they do not support Firefox OS. Though they do not have to support anything. :)


So currently Firefox Android is receiving the phone-blah.css. The site is working without big issues.

On the other hand, the user agent sniffing on Firefox OS is still wrong. We just need them to send the same experience to Firefox OS (than the one Firefox Android) is receiving.

Sending a reply to them.

Comment 11

[Karl Dubost💡 :karlcow]

Attachment: firefox-android-basecamp.png

What basecamp looks like currently in Firefox Android.

Comment 12

[Karl Dubost💡 :karlcow]

Status:

I think there is the usual problem of communications in between user support and developers, with misunderstandings in between. After a series of mail exchanges with user support, their final answer is:

> I'm sorry, but that is the reply that I got back from our programmers. We're not able to add this in right now, but will keep it in mind for a future update. 


The bug has evolved too. Right now it seems that Firefox on Android receives an acceptable version. My last screenshot. But Firefox OS receives the desktop site. Could someone confirm?
https://bugzilla.mozilla.org/attachment.cgi?id=8427757

Comment 13

[Mike Taylor [:miketaylr]]

Attachment: 2014-05-28 15.28.59.png

Karl, yep. Get a nice mobile version in Firefox for Android that seems to be working well.

Comment 14

[Karl Dubost💡 :karlcow]

Attachment: basecamp-renderings.jpg

OK I tried again. Let's see if they have a better understanding.
New ticket open.

========
Hi,

This is a question for engineers in charge of the user agent detection at Basecamp. There's no front-end dev required, just server side filtering.


We (Mozilla) would like to receive a better User Agent detection than the current one on mobile. 

* Firefox for Android (smartphone) is receiving a perfectly working version of the mobile site.
  User-Agent: Mozilla/5.0 (Android; Mobile; rv:36.0) Gecko/36.0 Firefox/36.0

* Firefox OS (smartphone) is receiving the **desktop** version (instead of mobile). 
  User-Agent: Mozilla/5.0 (Mobile; rv:36.0) Gecko/36.0 Firefox/36.0

Both are using exactly the same rendering engine (same browsers) with the same capabilities. There should be no difference at all. The difference is probably due to an ill-defined User Agent detection, and easy to fix.

Could we receive the mobile version for Firefox OS?


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

Comment 15

[Karl Dubost💡 :karlcow]

Received an answer ack.

===
Hi Karl! 

Thanks for taking the time to write in! Hope you are having a great Monday!

Our programmers are taking a look at this today. Either they or I will be in contact with you once more information is available. 

If you have any other questions, please reply to this email and I'll be happy to help!

Cheers!
*** ***
Basecamp Customer Support
===

Comment 16

[Karl Dubost💡 :karlcow]

My second contact was a hit and match!
Firefox OS is receiving the mobile version. Trumpets!

===

Hi Karl! 

We've deployed the rest of the fixes today. 

Cheers!
- ****

===


http://twitter.com/MozWebCompat/status/555079617036304384

Tested.