Bug 186316 - Tinder.com sometimes gets the wrong fonts
Summary: Tinder.com sometimes gets the wrong fonts
Status: RESOLVED DUPLICATE of bug 187228
Alias: None
Product: WebKit
Classification: Unclassified
Component: Service Workers (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-06-05 12:28 PDT by Chris Dumez
Modified: 2018-07-09 23:30 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Dumez 2018-06-05 12:28:12 PDT
Once a tab is in a bad state, it does not recover unless you shift-reload, so it could be memory cache related. Other tabs loaded at the same time work fine even though they use the same registration / service worker.

Looks like the issue could be related to a stylesheet missing: style.<SHA>.css according to WebInspector. It does not reproduce 100%, it is flaky. But once it occurs in a tab, this tabs stays in the bad state.
Comment 1 Radar WebKit Bug Importer 2018-06-05 12:28:36 PDT
<rdar://problem/40818514>
Comment 2 Chris Dumez 2018-06-05 15:35:40 PDT
I haven't been able to reproduce yet but I do see the following in the console:
The resource https://tinder.com/static/build/style.2d2101fd39f2a8cf9be861384dd3e7f1.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

Could be an interaction between service workers and preloading?
Comment 3 Chris Dumez 2018-06-05 15:38:49 PDT
Initially, style.2d2101fd39f2a8cf9be861384dd3e7f1.css is served by the service worker. Upon reloads, it comes from the memory cache.

Blowing away the memory cache using CND+Reload fixes it so this may indicate the service worker served us something bad and we stored it in the memory cache. Which would explain why following reload do not fix it (they keep getting the bad cached resource?).
Comment 4 Chris Dumez 2018-06-05 16:07:14 PDT
Response:
ETag: W/"fa18-163b32ae960"
Age: 519208
X-WebKit-CSP: default-src *; script-src * 'unsafe-inline'; style-src * 'unsafe-inline' blob:; img-src * data: blob:
X-Frame-Options: SAMEORIGIN
Content-Encoding: gzip
X-DNS-Prefetch-Control: on
X-XSS-Protection: 1; mode=block
Content-Security-Policy: default-src *; script-src * 'unsafe-inline'; style-src * 'unsafe-inline' blob:; img-src * data: blob:
Content-Type: text/css; charset=UTF-8
Vary: Accept-Encoding
Via: 1.1 2a47832c458ab2a6b20c8363f5aa35ea.cloudfront.net (CloudFront)
Last-Modified: Wed, 30 May 2018 22:28:44 GMT
Date: Wed, 30 May 2018 22:36:27 GMT
Referrer-Policy: origin-when-cross-origin
Cache-Control: public, max-age=31536000, immutable
Accept-Ranges: bytes
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=15552000; includeSubDomains
Server: nginx/1.12.1
x-download-options: noopen
x-amz-cf-id: xOz9jtSLtpkIqXyTjQL5Wu8_P8nQDb9SGe_2DmB_LUS8z28Cy2tvBQ==
x-cache: Hit from cloudfront
x-content-security-policy: default-src *; script-src * 'unsafe-inline'; style-src * 'unsafe-inline' blob:; img-src * data: blob:


Note that the resource has Cache-Control: immutable. As a result, if we had something bad cached locally, a reload would not help recover because we would not revalidate until the resource has expired (and max-age is pretty high).
Comment 5 Chris Dumez 2018-06-05 16:11:48 PDT
Note that the issue is that the fonts used are not right. For one of the elements, I looked at its font:
font-family: ProximaNova,sans-serif;

Which comes from https://tinder.com/static/build/style.2d2101fd39f2a8cf9be861384dd3e7f1.css

This seems to confirm that the issue is related to this stylesheet.
Comment 6 Myles C. Maxfield 2018-07-09 20:31:56 PDT
(In reply to Chris Dumez from comment #5)
> Note that the issue is that the fonts used are not right. For one of the
> elements, I looked at its font:
> font-family: ProximaNova,sans-serif;
> 
> Which comes from
> https://tinder.com/static/build/style.2d2101fd39f2a8cf9be861384dd3e7f1.css
> 
> This seems to confirm that the issue is related to this stylesheet.

Do you have Proxima Nova locally-installed? https://trac.webkit.org/changeset/233447/webkit
Comment 7 Chris Dumez 2018-07-09 22:40:16 PDT
(In reply to Myles C. Maxfield from comment #6)
> (In reply to Chris Dumez from comment #5)
> > Note that the issue is that the fonts used are not right. For one of the
> > elements, I looked at its font:
> > font-family: ProximaNova,sans-serif;
> > 
> > Which comes from
> > https://tinder.com/static/build/style.2d2101fd39f2a8cf9be861384dd3e7f1.css
> > 
> > This seems to confirm that the issue is related to this stylesheet.
> 
> Do you have Proxima Nova locally-installed?
> https://trac.webkit.org/changeset/233447/webkit

I was never able to reproduce. It was reported at WWDC.
Comment 8 Myles C. Maxfield 2018-07-09 23:30:24 PDT

*** This bug has been marked as a duplicate of bug 187228 ***