13

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?

Screenshot (broken)

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:

Broken image 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):

Screenshot (better)

Can we please have a quick fix before the day is over? :)

  • 2
    The "Blog" and "Featured on meta" panels on the right bar have the same problem. – user392547 Mar 31 at 13:38
  • 1
    The broken icons are by design: "All of the icons are actually set to "broken image" icons". – Wai Ha Lee Mar 31 at 14:26
4

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .