1281936 - Icon images don't show up on TripAdvisor mobile webapp UI, with layout.css.prefixes.webkit enabled (becuase svg background-images are not properly URL encoded)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Make sure the pref layout.css.prefixes.webkit is enabled (it's enabled by default in Firefox Nightly 50, Aurora 49, and "early" Beta 48 builds).

 2. Enter Responsive Design mode, and set an Android UA string, e.g.:
>     Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

 3. Visit https://www.tripadvisor.co.uk/ShowUserReviews-g186338-d211842-r239728730-Leadenhall_Market-London_England.html

 4. If you don't see a promo bar for the TripAdvisor Android App at the top of the screen, reload the page until it's there.

ACTUAL RESULTS:
No images show up on the promo bar. No logo, no star rating, no "x" at the left edge.

EXPECTED RESULTS:
Images should show up on the promo bar -- an owl logo, a star rating, and an "x" at the left edge.

This bug goes away if I toggle layout.css.prefixes.webkit to false.

Comment 1

[Daniel Holbert [:dholbert]]

CC Mike, in case he has cycles to diagnose this.  (I'm away until Tuesday -- just happened to trip over this bu during my travels today.)

I originally filed this as https://github.com/webcompat/web-bugs/issues/2798
Screenshot of broken rendering (Firefox 48 beta2):
https://camo.githubusercontent.com/37005d078749318e1f9dca67b1e7857f5d1001c7/68747470733a2f2f776562636f6d7061742e636f6d2f75706c6f6164732f323031362f362f35643264356366662d623233392d343439662d386632392d6366363266636535656465302e6a7067

Screenshot of working rendering (Firefox 47 release):
https://camo.githubusercontent.com/d79b88406c4444d9bd275af36f1266462c9c8dbd/68747470733a2f2f776562636f6d7061742e636f6d2f75706c6f6164732f323031362f362f30376635636334662d616363352d346639612d616338622d6433353062396561633030392e6a7067

Comment 2

[Daniel Holbert [:dholbert]]

Actually, I'm just noticing that images further down on the page are missing, too - the rating of "Leadenhall Market" itself (next to "264 reviews") and the Map/Call/Email/Save icons at the bottom of the page.

Comment 3

[Mike Taylor [:miketaylr]]

Yeah, happy to take a look -- quickly I noticed that with pref:false, we get a base64 encoded SVG image background for the app icon, but with pref:true, it's not base64 encoded. Not sure if that's meaningful, but I suspect whatever JS is used to determine what to solve is doing some kind of "webkit" support detection and doing different things based on that.

Heading out to dinner, but will be working after that and dig deeper.

Comment 4

[Mike Taylor [:miketaylr]]

So they have this "checkSvgFallback" method which will now early return because "WebKitTransform" in document.body.style now returns true. And because of that, they don't send the additional base64 encoded CSS document to Firefox:

https://static.tacdn.com/js3/ta-mobile-rollup-android-c-v23497395912b.js

ta.checkSvgFallback = function() {
    if ("WebkitTransform"in document.body.style) {
        return
    }
    var a = null ;
    if (ifdefNN(ta.m) && ifdefNN(ta.m.base64Css)) {
        ta.loadCss(ta.m.base64Css)
    }
    if (typeof (taTabletB64Css) != "undefined") {
        ta.loadCss(taTabletB64Css)
    }
}

But I wonder why they want to base64 encode svg bg images... if you click in one of the bg images in question you'll end up with `XML Parsing Error: unclosed token` because it eventually hits a `#` in a fill attribute.

I think if they just URL encoded # to %23 it should work (everywhere, I would think). We should get in touch and ask them to fix, because it will be broken for all their Firefox mobile users soon (if they don't update it).

Comment 5

[Mike Taylor [:miketaylr]]

(That said, it would be interesting to know if all other browsers allow unencoded # -- there seems to be a lot of questions on stackoverflow and bugs on github related to this.)

Comment 6

[Mike Taylor [:miketaylr]]

Karl, do we have contacts at Trip Advisor?

Comment 7

[Mike Taylor [:miketaylr]]

(In reply to Mike Taylor [:miketaylr] from comment #5)
> (That said, it would be interesting to know if all other browsers allow
> unencoded # -- there seems to be a lot of questions on stackoverflow and
> bugs on github related to this.)

Related comment here: https://bugzilla.mozilla.org/show_bug.cgi?id=826562#c2

Comment 8

[Daniel Holbert [:dholbert]]

Thanks for the triage, Mike!

Here's one such data URI from this TripAdvisor page:

data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='58px' height='12px' viewBox='0 0 58 12' overflow='visible' enable-background='new 0 0 58 12' xml:space='preserve'><path fill='#589442' d='M2.82,5.935c0,1.558,1.268,2.823,2.824,2.823c1.556,0,2.821-1.266,2.821-2.823 c0-1.556-1.266-2.821-2.821-2.821C4.088,3.113,2.82,4.379,2.82,5.935' /><path fill='#589442' d='M14.273,5.935c0,1.558,1.267,2.823,2.821,2.823c1.557,0,2.823-1.266,2.823-2.823 c0-1.556-1.267-2.821-2.823-2.821C15.54,3.113,14.273,4.379,14.273,5.935' /><path fill='#589442' d='M25.65,5.935c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C26.917,3.113,25.65,4.379,25.65,5.935' /><path fill='#589442' d='M48.541,5.935c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C49.808,3.113,48.541,4.379,48.541,5.935' /><path fill='#589442' d='M37.113,6.007c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C38.38,3.186,37.113,4.451,37.113,6.007' /></svg>

This URI "works" in Chrome, but it should not -- it's a bug in Chrome. Everything before the first "#" should be interpreted as a representation of the SVG content, and everything after the first # should be interpreted as a fragment identifier.  (This means the SVG document is truncated, which is why we show an error page when you load that data URI, and which is why it doesn't work as an image.) 

TripAdvisor just needs to use %23 here instead of #, as Mike says.  Here's the same data URI with that fix:
data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='58px' height='12px' viewBox='0 0 58 12' overflow='visible' enable-background='new 0 0 58 12' xml:space='preserve'><path fill='%23589442' d='M2.82,5.935c0,1.558,1.268,2.823,2.824,2.823c1.556,0,2.821-1.266,2.821-2.823 c0-1.556-1.266-2.821-2.821-2.821C4.088,3.113,2.82,4.379,2.82,5.935' /><path fill='%23589442' d='M14.273,5.935c0,1.558,1.267,2.823,2.821,2.823c1.557,0,2.823-1.266,2.823-2.823 c0-1.556-1.267-2.821-2.823-2.821C15.54,3.113,14.273,4.379,14.273,5.935' /><path fill='%23589442' d='M25.65,5.935c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C26.917,3.113,25.65,4.379,25.65,5.935' /><path fill='%23589442' d='M48.541,5.935c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C49.808,3.113,48.541,4.379,48.541,5.935' /><path fill='%23589442' d='M37.113,6.007c0,1.558,1.267,2.823,2.824,2.823c1.555,0,2.82-1.266,2.82-2.823 c0-1.556-1.266-2.821-2.82-2.821C38.38,3.186,37.113,4.451,37.113,6.007' /></svg>

Comment 9

[Mike Taylor [:miketaylr]]

Karl's still on PTO, redirecting to Adam.

Comment 10

[Adam Stevenson [:adamopenweb]]

We have another Tripadvisor bug open on Webcompat.com. I haven't heard back from customer support. Trying to reach an engineer using the Github notification system.
https://github.com/webcompat/web-bugs/issues/1708

Comment 11

[Mike Taylor [:miketaylr]]

This is fixed now, thanks Adam!


(looks like they URL encoded the SVG)
.smartbanner_v2 .smartbanner_app_logo, .interrupter_app_logo, .smartbanner_v3 .smartbanner_app_logo, .smartbanner_mta .smartbanner_app_logo {
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%27125px%27%20height%3D%27125px%27%20viewBox%3D%270%200%20125%20125%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Asketch%3D%27http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%27%3E%20%3C%21--%20Generator%3A%20Sketch%203.3%20%2811970%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%3Cg%20id%3D%27Page-1%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%20sketch%3Atype%3D%27MSPage%27%3E%20%3Cg%20sketch%3Atype%3D%27MSLayerGroup%27%3E%20%3Crect%20id%3D%27Rectangle-1%27%20fill%3D%27%23599542%27%20sketch%3Atype%3D%27MSShapeGroup%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27125%27%20height%3D%27125%27%20rx%3D%274%27%3E%3C%2Frect%3E%20%3Cg%20transform%3D%27translate%2813.0%2C%2033.0%29%27%20sketch%3Atype%3D%27MSShapeGroup%27%3E%20%3Cg%20id%3D%27Page-1%27%3E%20%3Cg%20id%3D%27TA_logo-%5BConverted%5D%27%3E%20%3Cpath%20d%3D%27M66.4%2C52.0%20C61.6%2C49.8%2057.9%2C45.9%2056.1%2C40.9%20C54.3%2C36.0%2054.5%2C30.7%2056.7%2C25.9%20C58.9%2C21.2%2062.8%2C17.5%2067.8%2C15.7%20C78.0%2C12.0%2089.4%2C17.2%2093.2%2C27.3%20C97.0%2C37.5%2091.8%2C48.8%2081.5%2C52.6%20C76.6%2C54.4%2071.2%2C54.2%2066.4%2C52.0%20C66.4%2C52.0%2071.2%2C54.2%2066.4%2C52.0%20L66.4%2C52.0%20L66.4%2C52.0%20Z%27%20fill%3D%27%23fff%27%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%27M5.5%2C34.0%20C5.5%2C23.2%2014.3%2C14.4%2025.2%2C14.4%20C36.2%2C14.4%2045.0%2C23.2%2045.0%2C34.0%20C45.0%2C44.9%2036.2%2C53.7%2025.2%2C53.7%20C14.3%2C53.7%205.5%2C44.9%205.5%2C34.0%20C5.5%2C34.0%205.5%2C44.9%205.5%2C34.0%20L5.5%2C34.0%20L5.5%2C34.0%20Z%27%20fill%3D%27%23fff%27%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%27M29.0%2C33.8%20C29.0%2C36.1%2027.2%2C37.9%2024.9%2C37.9%20C22.6%2C37.9%2020.8%2C36.1%2020.8%2C33.8%20C20.8%2C31.6%2022.6%2C29.7%2024.9%2C29.7%20C27.2%2C29.7%2029.0%2C31.6%2029.0%2C33.8%20C29.0%2C33.8%2029.0%2C31.6%2029.0%2C33.8%20L29.0%2C33.8%20L29.0%2C33.8%20Z%27%20fill%3D%27%23CB2323%27%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%27M78.7%2C33.8%20C78.7%2C36.1%2076.9%2C37.9%2074.6%2C37.9%20C72.3%2C37.9%2070.5%2C36.1%2070.5%2C33.8%20C70.5%2C31.6%2072.3%2C29.7%2074.6%2C29.7%20C76.9%2C29.7%2078.7%2C31.6%2078.7%2C33.8%20C78.7%2C33.8%2078.7%2C31.6%2078.7%2C33.8%20L78.7%2C33.8%20L78.7%2C33.8%20Z%27%20fill%3D%27%2347912C%27%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%27M66.6%2C33.8%20C66.6%2C29.4%2070.2%2C25.9%2074.6%2C25.9%20C79.0%2C25.9%2082.6%2C29.4%2082.6%2C33.8%20C82.6%2C38.2%2079.0%2C41.8%2074.6%2C41.8%20C70.2%2C41.8%2066.6%2C38.2%2066.6%2C33.8%20C66.6%2C33.8%2066.6%2C38.2%2066.6%2C33.8%20L66.6%2C33.8%20L66.6%2C33.8%20Z%20M62.4%2C33.8%20C62.4%2C40.5%2067.9%2C46.0%2074.6%2C46.0%20C81.4%2C46.0%2086.8%2C40.5%2086.8%2C33.8%20C86.8%2C27.1%2081.4%2C21.7%2074.6%2C21.7%20C67.9%2C21.7%2062.4%2C27.1%2062.4%2C33.8%20C62.4%2C33.8%2062.4%2C27.1%2062.4%2C33.8%20L62.4%2C33.8%20L62.4%2C33.8%20Z%20M16.9%2C33.8%20C16.9%2C29.4%2020.5%2C25.9%2024.9%2C25.9%20C29.4%2C25.9%2032.9%2C29.4%2032.9%2C33.8%20C32.9%2C38.2%2029.4%2C41.8%2024.9%2C41.8%20C20.5%2C41.8%2016.9%2C38.2%2016.9%2C33.8%20C16.9%2C33.8%2016.9%2C38.2%2016.9%2C33.8%20L16.9%2C33.8%20L16.9%2C33.8%20Z%20M12.7%2C33.8%20C12.7%2C40.5%2018.2%2C46.0%2024.9%2C46.0%20C31.7%2C46.0%2037.2%2C40.5%2037.2%2C33.8%20C37.2%2C27.1%2031.7%2C21.7%2024.9%2C21.7%20C18.2%2C21.7%2012.7%2C27.1%2012.7%2C33.8%20C12.7%2C33.8%2012.7%2C27.1%2012.7%2C33.8%20L12.7%2C33.8%20L12.7%2C33.8%20Z%20M49.8%2C57.3%20L55.2%2C49.4%20C57.6%2C52.4%2060.7%2C54.8%2064.3%2C56.5%20C70.3%2C59.2%2077.0%2C59.5%2083.3%2C57.2%20C96.1%2C52.5%20102.7%2C38.3%2097.9%2C25.6%20C97.1%2C23.4%2095.9%2C21.3%2094.6%2C19.5%20C95.7%2C14.5%2099.4%2C9.8%2099.4%2C9.8%20L83.2%2C9.8%20C73.8%2C3.7%2062.5%2C0.5%2049.8%2C0.5%20C36.9%2C0.5%2025.2%2C3.8%2015.9%2C9.8%20L0.4%2C9.8%20C0.4%2C9.8%204.1%2C14.6%205.3%2C19.5%20C2.2%2C23.5%200.5%2C28.6%200.5%2C34.0%20C0.5%2C47.6%2011.6%2C58.6%2025.2%2C58.6%20C33.1%2C58.6%2040.0%2C55.0%2044.6%2C49.4%20L49.8%2C57.3%20L49.8%2C57.3%20Z%20M25.6%2C9.5%20C32.8%2C6.4%2041.0%2C4.8%2049.8%2C4.8%20C58.7%2C4.8%2066.8%2C6.4%2073.8%2C9.6%20C71.3%2C9.6%2068.6%2C10.1%2066.1%2C11.1%20C59.9%2C13.3%2054.9%2C17.9%2052.1%2C23.8%20C50.9%2C26.4%2050.2%2C29.2%2050.0%2C31.9%20C48.9%2C19.5%2038.4%2C9.6%2025.6%2C9.5%20C25.6%2C9.5%2038.4%2C9.6%2025.6%2C9.5%20L25.6%2C9.5%20L25.6%2C9.5%20Z%20M66.4%2C52.0%20C61.6%2C49.8%2057.9%2C45.9%2056.1%2C40.9%20C54.3%2C36.0%2054.5%2C30.7%2056.7%2C25.9%20C58.9%2C21.2%2062.8%2C17.5%2067.8%2C15.7%20C78.0%2C12.0%2089.4%2C17.2%2093.2%2C27.3%20C97.0%2C37.5%2091.8%2C48.8%2081.5%2C52.6%20C76.6%2C54.4%2071.2%2C54.2%2066.4%2C52.0%20C66.4%2C52.0%2071.2%2C54.2%2066.4%2C52.0%20L66.4%2C52.0%20L66.4%2C52.0%20Z%20M5.5%2C34.0%20C5.5%2C23.2%2014.3%2C14.4%2025.2%2C14.4%20C36.2%2C14.4%2045.0%2C23.2%2045.0%2C34.0%20C45.0%2C44.9%2036.2%2C53.7%2025.2%2C53.7%20C14.3%2C53.7%205.5%2C44.9%205.5%2C34.0%20C5.5%2C34.0%205.5%2C44.9%205.5%2C34.0%20L5.5%2C34.0%20L5.5%2C34.0%20Z%27%20fill%3D%27%23040203%27%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%27M25.6%2C9.5%20C32.8%2C6.4%2041.0%2C4.8%2049.8%2C4.8%20C58.7%2C4.8%2066.8%2C6.4%2073.8%2C9.6%20C71.3%2C9.6%2068.6%2C10.1%2066.1%2C11.1%20C59.9%2C13.3%2054.9%2C17.9%2052.1%2C23.8%20C50.9%2C26.4%2050.2%2C29.2%2050.0%2C31.9%20C48.9%2C19.5%2038.4%2C9.6%2025.6%2C9.5%20C25.6%2C9.5%2038.4%2C9.6%2025.6%2C9.5%20L25.6%2C9.5%20L25.6%2C9.5%20Z%27%20fill%3D%27%23F7E88B%27%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E%20");
	height: 63px;
	width: 63px;
}