Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this community
Self descript. I know it's already been asked here and here. But apparently it's still an issue. This only started happening to me this week that I've noticed. Per the comments in the linked answer, a hard refresh should fix it but alas, it does not. Firefox 57.0. Works on SE but doesn't work on SO or many of the other sites I visit.
I disabled my add-ons and did a hard refresh but still to no avail. I've exited my browser cleared my temp stuffs as well.
This keeps happening every time a new site is added. Clearly, something's broken with the sprite sheet update process.
Inspecting the CSS for the site icons, it looks like this (using the SO icon as an example):
.favicon-stackoverflow {
background-position: 0 -5832px;
}
.favicon {
width: 16px;
height: 16px;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../../img/favicons-sprite16.png?v=57f32c762460);
}
The icons are loaded from a single sprite sheet, with each icon element having a distinct background-position that determines which part of the sprite sheet is shown for each site. Apparently, the icons in the sheet are simply listed in alphabetical order, so when new sites are added, the positions of any icons for sites that come later in the alphabet will change. That involves changing both the sprite sheet itself and the background-position in the CSS, and if these somehow get out of sync, the wrong icons will appear.
However, they really shouldn't be getting out of sync, since both the sprite sheet and the CSS file itself have cache breakers in their URLs. See that v=57f32c762460 in the quote above? That's the current sprite sheet version ID, while the CSS file it was quoted from currently has the version ID v=13c0344d1677. What's supposed to happen, when a new site icon is added, is that both of these version IDs are changed. So now, when you load a new page, your browser will see that the CSS URL has changed, and will reload the new version from the SE servers. And then it will see that the sprite sheet URL in that CSS file has also changed, and will reload the sprite sheet, too.
But clearly this isn't always happening. Somehow, the two files are getting out of sync. It looks like either:
(The former seems more likely, but the latter is also a possibility. Of course, there could be other possible causes, too, such as the CDN serving stale files for some reason.)
To fix this, some SE developer need to take a close look at the new site deployment process, and figure out why it isn't correctly updating both of these cache breakers (or purging CDN caches, or whatever the actual issue is).
Or, as an alternative solution, SE could get rid of the sprite sheet entirely, and switch to embedding icons in CSS with data URIs. That would get rid of the synchronization issues, and perhaps even improve page loading times. It works for Wikipedia, there's no reason why it couldn't work here too.
