958575 - Google News - Tablet experience in Chrome for Android superior to Firefox for Android

Status: RESOLVED FIXED

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

Description

[Aaron Train [:aaronmt]]

Attachment: Chrome|Firefox - screenshot comparison

See screenshot.

The experience for tablets in Chrome for Android superior to that currently served (desktop optimized) to Firefox for Android.

We should outreach to Google to determine what is necessary to get a tablet optimized experience for Google News to Firefox for Android

Comment 1

[Mike Taylor [:miketaylr]]

The primary difference I see right now is the inability to swipe down for more content, and when you swipe between "pages" -- there is no animated transition like on the iPad. Quickly looking through the code, they do quite a lot for non-webkit prefixes, etc., so this needs some closer analysis.

Comment 2

[Mike Taylor [:miketaylr]]

Still don't fully understand what's broken here. Scrolling is obviously broken, "Error: EventHandler.handleEvent not implemented" in the console (an error that they throw themselves). 

And seeing some crazy stuff after logging some arguments from methods in the callstack that calls that error: https://cloudup.com/izChyZ3oYBQ

Comment 3

[Mike Taylor [:miketaylr]]

Attachment: google-news.png

(meanwhile, 4 months later...) 

Based on my currently understanding, Google probably won't spend the time to fix the Chrome site--there's just too much broken about it when served to Firefox for Android (messed up layout, spritesheets showing, more?).

But if we spoof as iPad or an Android Tablet, the experience isn't quite the same as Chrome's--but it's much nicer than the desktop site we currently get and quite usable.

I wonder if they'd be willing to add in 2 CSS tweaks to fix the blue search button (see screenshot)? Everything else works, AFAICT, including swiping content, carousels, and expanding animations.

Tweaks I used:

#kd-search {
  left: 150px;
}

.jfk-button {
  position:absolute;
  right: -80px
}


See screenshot (left is with 2 CSS tweaks, right without).

Karl, what do you think? Worth asking?

Comment 4

[Mike Taylor [:miketaylr]]

I guess they would want to align the search box with the "US edition", so the CSS in my last comment is more of a sketch.

Comment 5

[Karl Dubost💡 :karlcow]

Mike, which is the size of the viewport for the tablet with Firefox Android?

On Firefox Desktop. Emulating the ipad/iOS6 UA and size of 1024x768. The rendering is good. BUT I can't scroll down and no link is clickable.

btw,
   "Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; Sony Tablet S Build/TISU0R0110) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30"

is also receiving the desktop version instead of the tablet.

Comment 6

[Mike Taylor [:miketaylr]]

My viewport settings on my Nexus tablet: 

portrait:
window.innerWidth: 980
window.innerHeight: 1357

landscape:
window.innerWidth: 980
window.innerHeight: 538

It seems like the real issue is that the portrait design assumes a certain fixed width, if you go to landscape the blue search button displays normally.

This is the UA string I was using to get this tablet version: Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30"

Comment 7

[Karl Dubost💡 :karlcow]

These tests are done on Firefox and Emulating another UA to see if there are parameters triggering a good version of site.

Ok the width for which the button seems to go under the search box in the tablet version is 647px.
When the tablet is in portrait mode on ipad and chrome we don't see the full menu (with a locales dependency (lengths of words)).

I tried with many different user agents. So far only Chrome on tablet and iPad triggered the tablet versions. The others received the desktop version (even on WebKit tablets such as Sony.)

When setting the UA for an ipad, we get in the console

   'EventHandler.handleEvent not implemented'

coming from:
http://www.gstatic.com/news-static/js/4151017979-ja-tabletwebapp_binary_ja.js

    Xa(Mq[A], function () {
        throw p('EventHandler.handleEvent not implemented');
    });

Comment 8

[Karl Dubost💡 :karlcow]

Tested with Firefox Android UA on Gecko Desktop.
And We get a usable web site now. 

Mike?

Comment 9

[Mike Taylor [:miketaylr]]

Sort of. With a 4.4 in the UA string, I get a tablet-ish site. With the 5.1.1 (what my Nexus 7 runs), I get the Desktop-ish site. Obviously.

Aaron, would you mind taking a look to see if Nightly improves for you?

Comment 10

[Aaron Train [:aaronmt]]

I just have my Nexus 6 on me right now, I get the same results on 5.1.1 (desktop site)

Comment 11

[Karl Dubost💡 :karlcow]

Attachment: fxand-tablet-portrait.png

Screenshot Portrait Mode using this user agent
 Mozilla/5.0 (Android 4.4.4; Tablet; rv:44.0) Gecko/44.0 Firefox/44.0

Comment 12

[Karl Dubost💡 :karlcow]

Attachment: fxand-tablet-landscape.png

Screenshot Landscape Mode using this user agent
 Mozilla/5.0 (Android 4.4.4; Tablet; rv:44.0) Gecko/44.0 Firefox/44.0

Comment 13

[Mike Taylor [:miketaylr]]

ni? self to re-test.

Comment 14

[Mike Taylor [:miketaylr]]

Still an issue. Womp Womp.

Comment 15

[Mike Taylor [:miketaylr]]

Google has deployed a new site -- we get the same experience as Chrome now.