Web-bugs: www.tripadvisor.com - mobile site is not usable

[hallvors]

URL: http://www.tripadvisor.com
Browser / Version: Firefox 40.0
Operating System: Firefox OS
Problem type: Mobile site is not usable

Steps to Reproduce
1) Navigate to: http://www.tripadvisor.com

Expected Behavior: Top left menu icon and top logo should be visible, menu should have icons

Actual Behavior: no menu button, no logo, no icons.

There's server-side sniffing sending different CSS to phones with "Android" in the UA string:
link rel='stylesheet' type='text/css' media='screen, handheld' href='http://static.tacdn.com/css2/mobile2012-rollup-android-v23464609129a.css'
vs
link rel='stylesheet' type='text/css' media='screen, handheld' href='http://static.tacdn.com/css2/mobile2012-rollup-generic-v21645363600a.css'

Same with external JS files. Some of the extra code sent to Android browsers defines the missing graphics.

[hallvors]

This shows what the page looks like if you use a Firefox OS user-agent string:

[hallvors]

(The missing icons can be considered a sensible attempt at adapting to a presumed low-end phone, but they should certainly make sure the logo and the burger menu button are always visible..)

[karlcow]

with Firefox Android.

To contact
https://www.tripadvisorsupport.com/hc/en-us/articles/200615307-How-can-I-give-you-my-feedback-on-the-mobile-application-

[adamopenweb]

Left feedback using the website form. We'll see if they respond to the issue.

[adamopenweb]

Maybe @RyanMacBern can help us find a contact?
We also have this bug for trip advisor in Bugzilla related to SVG:
https://bugzilla.mozilla.org/show_bug.cgi?id=1281936

[dholbert]

tl;dr from the Bugzilla instance of this bug: the issue seems to be that TripAdvisor's Chrome/WebKit codepath (which we're now triggering in Nightly & DevEdition due to our support for some webkit prefixes) depends on SVG image data-URIs that have raw "#" characters inside of their markup. And that's bad, because "#" is a reserved character inside of a URI. In Firefox at least, this "#" character unexpectedly truncates their SVG markup and begins a huge, bogus #id-reference suffix on the end of their URI. (This does not happen in Chrome, but that's because Chrome isn't following the URI rfc on this point; this is a Chrome bug.)

TripAdvisor should be processing their SVG data-URI-string with something like encodeURIComponent() which will convert "#" into "%23", which should decode correctly & work everywhere.

[RyanMacBern]

I've sent an email to the TripAdvisor development team responsible for this area. Should be an easy fix on our end. Just a matter of prioritizing it.

[dholbert]

Thanks, Ryan!

If it helps, they should be able to test (and see the issue) using the "Firefox Aurora for Android" build which is available here: https://www.mozilla.org/en-US/firefox/channel/#developer

(Or, using desktop Firefox Developer Edition, with a UA-string override extension to specify an Android UA string like "Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0")

[dholbert]

Also, @RyanMacBern, if it helps inform the prioritization decision: we're expecting to ship our webkit-prefixed CSS features (which trigger the TripAdvisor codepath in question) in Firefox 49, which is released on September 13th (and which is released as our Beta version 6 weeks earlier, on August 2nd).

At that point, all Firefox for Android users will be affected by this bug. It would be great to have this addressed comfortably before then, if possible!

[RyanMacBern]

Just to give you guys an update... we have somebody looking into it now.

[miketaylr]

Thanks @RyanMacBern!

[miketaylr]

@RyanMacBern just noticed the SVG bug is fixed in production, thanks!

[adamopenweb]

I think the only outstanding issue here is the FFOS bug. Since FFOS is no longer supported by Mozilla and this issue has been open for a year, I think we should close this. If anyone disagrees, we can open back up and discuss.