The April Fools HNQ broken image icons are broken (on high-DPI screens)

Question

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 background-size property 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.

(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? :)

Answer 1

Since the SE developers have not yet reacted to this extremely urgent bug report, I have added an interim client-side fix for this bug into my Stack Overflow Unofficial Patch (SOUP) user script. The fix detects whether Time Travel Mode is active, and applies a background-size: auto style to the favicons if it is:

$('.container:has(.tm-unicorn-back) .favicon').filter( function () {
    return /april-fools-2019\/broken-image\.png/.test($(this).css('background-image'));
} ).css('background-size', 'auto');

The fix is currently only in the unstable development branch of SOUP, pending further testing that I expect I'll finish in a day or so. Of course, I hope that Stack Exchange will have noticed and fixed this critical issue by then. This is important!!!1!11!! :D