Page MenuHomePhabricator

mobile termbox missed icons
Closed, ResolvedPublic

Description

Problem:
Mobile termbox isn't showing edit/cancel/... icons. It should.

Example:
https://test.m.wikidata.org/wiki/Q188424

Event Timeline

@Matthias_Geisler_WMDE and I looked into it and for the request the browser make for the edit svg, we get this response:

HTTP/1.1 200 OK
Date: Mon, 30 Sep 2019 09:48:32 GMT
Content-Type: image/svg+xml
Content-Length: 440
Connection: close
Server: mw1251.eqiad.wmnet
Cache-Control: public, s-maxage=31536000, max-age=31536000
X-Powered-By: PHP/7.2.22-1+0~20190902.26+debian9~1.gbpd64eb7+wmf1
X-Content-Type-Options: nosniff
Access-Control-Allow-Origin: *
Last-Modified: Tue, 24 Sep 2019 20:35:21 GMT
Backend-Timing: D=24085 t=1569524407799641
X-Varnish: 191737107 57852233, 137093349 27027905, 611472577 558632976
Content-Encoding: gzip
Vary: Accept-Encoding
Age: 93215
X-Cache: cp1087 hit/2, cp3040 hit/9, cp3040 hit/256
X-Cache-Status: hit-front
Server-Timing: cache;desc="hit-front"
Strict-Transport-Security: max-age=106384710; includeSubDomains; preload
Set-Cookie: WMF-Last-Access=30-Sep-2019;Path=/;HttpOnly;secure;Expires=Fri, 01 Nov 2019 00:00:00 GMT
Set-Cookie: WMF-Last-Access-Global=30-Sep-2019;Path=/;Domain=.wikipedia.org;HttpOnly;secure;Expires=Fri, 01 Nov 2019 00:00:00 GMT
X-Analytics: https=1;nocookies=1
X-Client-IP: 90.187.22.233
Set-Cookie: GeoIP=DE:BE:Berlin:52.50:13.38:v4; Path=/; secure; Domain=.wikipedia.org
Accept-Ranges: bytes

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -410 2048 2048" width="24" height="24">
    <g id="g4">
        <path d="M307.05 1073.838q32.507 22.505 97.522 87.52L1659.846 26.107q-33.757-60.013-101.272-82.518zm-135.03-51.26L1563.576-225.197q156.284 26.256 276.31 155.034Q1959.91 58.616 1968.663 217.4L575.858 1470.177l-515.112 55.012z" id="path6" fill="#72777d"/>
    </g>
</svg>

That response contains the header Content-Encoding: gzip seems to cause the browser to decode the content incorrectly, resulting in error (as seen in firefox console):

XML Parsing Error: no root element found
Location: https://test.m.wikidata.org/w/extensions/Wikibase/view/lib/wikibase-termbox/assets/pen.svg?18f0e
Line Number 1, Column 1:

When we intercepted the response before the browser gets it, and removed that header, the browser rendered the svg correctly.

Worth noting that when we tried to look at the response of other icons that show up, they did not contain the Content-Encoding header.

Worth noting too, changing the request url of that edit svg (changing the hash for example), it causes it to work as well. Suspicion is that it is cached (in varnish?) with wrong header from earlier issue that is fixed by now? That might make sense as the edit svg appears on beta correctly (where there's no varnish)


Links for reference

Gilles claimed this task.
Gilles added a subscriber: Gilles.

Should be fixed now.

Waiting on SRE / Performance-Team feedback.

From our side, a quick solution (might turn to be the only one too) is to release a new version of termbox (patch bump), with impacted svgs slightly changed (can add a comment or smth) to change their link hash and use a correctly gzipped version.

Check again, all affected SVGs should be fixed, we've purged them, no hash change required.

Should be fixed now.

Thanks @Gilles

For the record, was it fixed by purging the cache for these svgs? Sorry just read your comment on the other task.. all good!

Yes, exactly, the Varnish caches for these SVGs were purged. That was the fix. We should have done that when the VCL change was rolled out, we just didn't anticipated that Varnish would misbehave with already cached uncompressed objects.