I just encountered the new April Fools theme, and as someone who made my first web page in the 90's, I must say I love it! The Hot Network Questions sidebar with the animated flames is a particularly nice touch!
But, uh... what happened to the site icons?
OK, let me just right-click and select Inspect... hmm, OK, seems like they're broken on purpose. Apparently, they've all been replaced with this icon:
OK, that makes sense. Looks like it's supposed to look like (a kind of a crappy low-res version of) the classic Netscape broken image icon. Only, that's still not what it actually looks like on the page. :( What's wrong?
Well, apparently, what's wrong is that whoever wrote the CSS for the April Fools theme forgot to set the test it on high-DPI screens, so it's still assuming that the new background image has the same dimensions as the normal icon sprite (i.e. currently 32px by 13500px, scaled down to 16px by 6750px for higher DPI). Which means that the browser tries to scale the (20px by 21px) broken image icon up to a height of 6750px, and then only shows the top 16px of the result.background-size
property
(The normal CSS sprite scaling is only set conditionally based on a CSS @media
query, so it only affects users with high-DPI screens. Conveniently, I happen to have an external monitor with a lower DPI than my laptop's built-in display, so I can make this bug appear and disappear just by moving the browser window from one screen to the other.)
Anyway, adding background-size: 16px 16px
to the CSS makes it look a lot better (and also look the same on both screens):
Can we please have a quick fix before the day is over? :)