{"action":"created","issue":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/58","repository_url":"https://api.github.com/repos/bramstein/fontfaceobserver","labels_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/58/labels{/name}","comments_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/58/comments","events_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/58/events","html_url":"https://github.com/bramstein/fontfaceobserver/issues/58","id":137122205,"number":58,"title":"FOUT on slow devices even when fonts have been downloaded","user":{"login":"pascalsiegel","id":17522945,"avatar_url":"https://avatars.githubusercontent.com/u/17522945?v=3","gravatar_id":"","url":"https://api.github.com/users/pascalsiegel","html_url":"https://github.com/pascalsiegel","followers_url":"https://api.github.com/users/pascalsiegel/followers","following_url":"https://api.github.com/users/pascalsiegel/following{/other_user}","gists_url":"https://api.github.com/users/pascalsiegel/gists{/gist_id}","starred_url":"https://api.github.com/users/pascalsiegel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pascalsiegel/subscriptions","organizations_url":"https://api.github.com/users/pascalsiegel/orgs","repos_url":"https://api.github.com/users/pascalsiegel/repos","events_url":"https://api.github.com/users/pascalsiegel/events{/privacy}","received_events_url":"https://api.github.com/users/pascalsiegel/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-29T01:24:55Z","updated_at":"2016-02-29T06:58:59Z","closed_at":null,"body":"I noticed that there can be an FOUT on slow devices. For example an old smartphone or tablet or when a use Virtualbox with Mac OS X and Safari. The FOUT is happening even when the font has been already downloaded, it is very short but still, it is.\r\n\r\nFrom what I could observe it seems to come from the time it takes fontfaceobserver to apply the class when it detected the font is available, and then for the devices to do the re-render and re-paint. So the solution is to set the class base on a cookie that is when the font has been download (font-x-available=1 cookie). So far so good, this is working.\r\n\r\nBut there is an issue when a user is refreshing/ reloading the page (F5 or click on the refresh), the cookie saying the font is available is still there, the class gets added but the font needs to be downloaded. The issue is not the FOUT but the fact that the font/text doesn’t have the same width and there is a major re-layout or re-flow happening.\r\n\r\nMy solution so far is to detect the reload/refresh by looking at HTTP_CACHE_CONTROL on the server side (I could not find how to do this on the client side):\r\n1)\twhen it is a reload set a “reload=1” cookie (server side).\r\n2)\tOn the client side, if the cookie reload=1 is set: do not add the font classes that would be added based on the font-x-available cookie, and delete the cookie. This makes the page load as it would be the first ever time following the usual process.\r\n\r\nNetwork speed has no influence on the FOUT on slow devices, the FOUT is happening anyway, but slow network makes the re-paint/ re-flow just worse.\r\n\r\nI am aware this is somewhat overdoing it! I was wondering if other people have seen this FOUT + re-paint on slow devices. And if there is another way to take care of the slow device + reload issue.\r\n\r\nBest,\r\nPascal"},"comment":{"url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/comments/190069760","html_url":"https://github.com/bramstein/fontfaceobserver/issues/58#issuecomment-190069760","issue_url":"https://api.github.com/repos/bramstein/fontfaceobserver/issues/58","id":190069760,"user":{"login":"vijayaraghavanramanan","id":13736892,"avatar_url":"https://avatars.githubusercontent.com/u/13736892?v=3","gravatar_id":"","url":"https://api.github.com/users/vijayaraghavanramanan","html_url":"https://github.com/vijayaraghavanramanan","followers_url":"https://api.github.com/users/vijayaraghavanramanan/followers","following_url":"https://api.github.com/users/vijayaraghavanramanan/following{/other_user}","gists_url":"https://api.github.com/users/vijayaraghavanramanan/gists{/gist_id}","starred_url":"https://api.github.com/users/vijayaraghavanramanan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vijayaraghavanramanan/subscriptions","organizations_url":"https://api.github.com/users/vijayaraghavanramanan/orgs","repos_url":"https://api.github.com/users/vijayaraghavanramanan/repos","events_url":"https://api.github.com/users/vijayaraghavanramanan/events{/privacy}","received_events_url":"https://api.github.com/users/vijayaraghavanramanan/received_events","type":"User","site_admin":false},"created_at":"2016-02-29T06:58:59Z","updated_at":"2016-02-29T06:58:59Z","body":"Don't know much about your point on reload but yes cookie (or something equivalent like local storage or session storage) required for second load as argued here: \r\n\r\nhttps://www.filamentgroup.com/lab/font-events.html\r\n\r\nWhat I observe is sometimes cookies are also slow (probably asynchronous) and I get a FOUT. So one trick is to have .fonts-loaded as an html class and remove it if no cookie. That way a page can paint with an html class .fonts-loaded before cookie is checked and there's no FOUT. "}}