66

And if I click on it...

Looks like a CSS sprite issue...

I'm thinking that the image was recently changed, by looking at the name, https://meta.stackoverflow.com/content/img/[email protected]

Currently on Chrome Version 33.0.1750.154 m. Firefox is fine though, with all zoom levels.

Steps to reproduce:

Either browse the site on a device with Retina display, or using Chrome follow those steps:

  1. Change zoom level to 150% or more.
  2. Reload the page.
Improve this question
26
  • More information, please? Like, browser and OS version. No repro on FF 27.0.1, Win XP SP 3 though. Edited: even with any zoom level.
    – Meta Andrew T.
    Commented Mar 18, 2014 at 6:31
  • 2
    I see the same issue on OSx 10.9.2 Safari 7.0.2
    – Konstantin Rudy
    Commented Mar 18, 2014 at 6:32
  • 14
    I'm seeing this on both the mobile view and full site, Android 4.3, with Chrome, zoom is 100%
    – psubsee2003
    Commented Mar 18, 2014 at 6:33
  • 1
    Same problem here, Chrome on OSX
    – Tristan
    Commented Mar 18, 2014 at 6:46
  • 4
    Can confirm using Chrome Version 33.0.1750.152 on OS X 10.9.2. Persists on all zoom levels, including 100%. Problem exists on Safari, but works fine on Firefox, same OS. (Seems to be a WebKit/Blink issue.)
    – Alexis King
    Commented Mar 18, 2014 at 6:46
  • "browser zoom on 150%" There's your problem.
    – michaelb958--GoFundMonica
    Commented Mar 18, 2014 at 6:50
  • @michaelb958: The browser zoom is not the issue. I am reproducing on OSX Chrome 33.0.1750.152.
    – sberry2A
    Commented Mar 18, 2014 at 6:52
  • @sberry2A Looks like this is more serious than I thought. Ignore that zoom-level comment.
    – michaelb958--GoFundMonica
    Commented Mar 18, 2014 at 6:55
  • Just happened to me as well: Browser Google Chrome: Version 33.0.1750.152 OS: Ubuntu Zoom level: 150%
    – donfuxx
    Commented Mar 18, 2014 at 7:04
  • It's okay on Chrome 33.0.1750.117 on Windows 7 for me, but b0rked on the default Android browser.
    – ben is uǝq backwards
    Commented Mar 18, 2014 at 7:05
  • 1
    I can reproduce this on 33.0.1750.154 , Win 7 x64, but i have to do a page reload after i change the zooming level.
    – Jehof
    Commented Mar 18, 2014 at 7:06
  • 5
    This bug also occurs on iOS 7.1 Safari.
    – Patrick Hofman
    Commented Mar 18, 2014 at 7:06
  • 4
    Same problem with mobile theme on iOS on an iPhone 5
    – conorgriffin
    Commented Mar 18, 2014 at 8:07
  • 1
    Same problem on Galaxy s3 android 4.3 standard webbrowser.
    – Kees Sonnema
    Commented Mar 18, 2014 at 8:53
  • 1
    @ShadowWizard Yeah, the fix is being built out right now.
    – balpha StaffMod
    Commented Mar 18, 2014 at 11:47

2 Answers 2

Reset to default
35

A fix is rolling out now. A certain designer and a certain developer combined various sprites last night to reduce the http requests on first load...and they also conspired to screw up retina to see if we'd notice.

Hold strong my high-DPI brothers and sisters! We shall not tolerate this retina oppression!

Yours truly,
Nick Craver
Self-Appointed Leader, Stack Exchange Retinafication Revolution

P.S. Weekly meetings mocking standard DPI users are now 6pm Tuesday to Thursday due to the daylight savings change

Improve this answer
9
  • That's good, even in your already high standards. Kudos!
    – Shadow Wizard
    Commented Mar 18, 2014 at 11:55
  • 1
    Since it looks like you are our leader in the Retinafication Revolution.. when will our eyes going to stop bleeding every time we see the logo and other things on SO?! meta.stackexchange.com/q/167244/142717
    – Lipis
    Commented Mar 18, 2014 at 11:56
  • 2
    @Lipis soon, we just ordered Jin a rMBP so he can go retina crazy on all the sites. The <img> tags we haven't decided on yet (only a few), but everything referenced via LESS/CSS is relatively easy - just needs image work.
    – Nick Craver
    Commented Mar 18, 2014 at 11:57
  • 2x the fun (or is it 4x) I can never remember how many dimensions count :/
    – bmike
    Commented Mar 18, 2014 at 11:59
  • 1
    @Nick for small images like little avatars, tags, etc.. you could serve only the high resolution image.. but then again you can evaluate what's best.. but since Jin is on it.. really looking forward :) Consider also SVG for the logos.. caniuse.com/svg
    – Lipis
    Commented Mar 18, 2014 at 12:00
  • 2
    @Lipis we actually have a secret page in the works full of svg...we're definitely considering it, svg sprites and such
    – Nick Craver
    Commented Mar 18, 2014 at 12:04
  • @Nick Super awesome.. in case you want some external clickers on this page.. ping somewhere..! SVG FTW!!!
    – Lipis
    Commented Mar 18, 2014 at 12:06
  • 1
    @Lipis you'll see a mockup of the page this week I believe, if not then next...not ready yet as there's a lot of data work to make it live. I'm playing with SVG at night to illustrate the performance hit from SSL as well: i.sstatic.net/hAB6q.png ...this is gonna be a fun, interactive, blog post on SSL :)
    – Nick Craver
    Commented Mar 18, 2014 at 12:12
  • 1
    Any status updates? I'm seeing some retina-compatible sprites, but site logos are still low-res (except this one!) — what's the rollout plan?
    – jtbandes
    Commented Jul 23, 2014 at 2:37
9

I have quick fixed it in my Google Chrome Developer options like this and commented out the following:

.topbar .topbar-icon, .topbar .date-group-toggle, .topbar .icon-help>.triangle {
   background-image: url('../img/[email protected]?v=e119046ac45c');
   -moz-background-size: 300px 120px;
   -o-background-size: 300px 120px;
   -webkit-background-size: 300px 120px;
   background-size: 300px 120px;

Then looks fine on my Google Chrome even on 150%. I am posting this just in case it might be helpful for fixing it.

See images:

Before:

enter image description here

After:

enter image description here

Improve this answer
1
  • Changing background-size to 300px 240px instead of commenting out all the rules solves me the problem on retina display. Besides of it, commenting out background-image makes image blurred because of fallback to sprite not adapted to retina displays.
    – Vadim
    Commented Mar 18, 2014 at 8:16

You must log in to answer this question.

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