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)

RESOLVED FIXED

Status

Tech Evangelism
Mobile
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: dholbert, Assigned: adamopenweb)

Tracking

Trunk

Firefox Tracking Flags

(firefox50 affected)

Details

(Whiteboard: [country-all][sitewait], URL)

(Reporter)

Description

2 years ago
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.
(Reporter)

Comment 2

2 years ago
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.
Summary: Images don't show up on TripAdvisor Android App promo bar, with layout.css.prefixes.webkit enabled → Icon images don't show up on TripAdvisor mobile webapp UI, with layout.css.prefixes.webkit enabled
(Reporter)

Updated

2 years ago
Flags: needinfo?(miket)
(Reporter)

Updated

2 years ago
Flags: needinfo?(dholbert)
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.
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).
Component: CSS Parsing and Computation → Mobile
Flags: needinfo?(miket)
Product: Core → Tech Evangelism
Summary: Icon images don't show up on TripAdvisor mobile webapp UI, with layout.css.prefixes.webkit enabled → 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)
Whiteboard: [country-all][contactready]
(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.)
Karl, do we have contacts at Trip Advisor?
Flags: needinfo?(kdubost)
(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
(Reporter)

Comment 8

2 years ago
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>
Flags: needinfo?(dholbert)
Karl's still on PTO, redirecting to Adam.
Flags: needinfo?(kdubost) → needinfo?(astevenson)
(Assignee)

Comment 10

2 years ago
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
Assignee: nobody → astevenson
Status: NEW → ASSIGNED
Flags: needinfo?(astevenson)
Whiteboard: [country-all][contactready] → [country-all][sitewait]
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;
}
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.