65

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/share-sprite-new@2.png

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.
  • 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. Mar 18 '14 at 6:31
  • 2
    I see the same issue on OSx 10.9.2 Safari 7.0.2 – Konstantin Rudy Mar 18 '14 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 Mar 18 '14 at 6:33
  • 1
    Same problem here, Chrome on OSX – Tristan Mar 18 '14 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 Mar 18 '14 at 6:46
  • "browser zoom on 150%" There's your problem. – michaelb958 Mar 18 '14 at 6:50
  • @michaelb958: The browser zoom is not the issue. I am reproducing on OSX Chrome 33.0.1750.152. – sberry2A Mar 18 '14 at 6:52
  • @sberry2A Looks like this is more serious than I thought. Ignore that zoom-level comment. – michaelb958 Mar 18 '14 at 6:55
  • Just happened to me as well: Browser Google Chrome: Version 33.0.1750.152 OS: Ubuntu Zoom level: 150% – donfuxx Mar 18 '14 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 Mar 18 '14 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 Mar 18 '14 at 7:06
  • 5
    This bug also occurs on iOS 7.1 Safari. – Patrick Hofman Mar 18 '14 at 7:06
  • 4
    Same problem with mobile theme on iOS on an iPhone 5 – conorgriffin Mar 18 '14 at 8:07
  • 1
    Same problem on Galaxy s3 android 4.3 standard webbrowser. – Kees Sonnema Mar 18 '14 at 8:53
  • 1
    @ShadowWizard Yeah, the fix is being built out right now. – balpha Mar 18 '14 at 11:47
34

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

  • That's good, even in your already high standards. Kudos! – ShaWiz Mar 18 '14 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 Mar 18 '14 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 Mar 18 '14 at 11:57
  • 2x the fun (or is it 4x) I can never remember how many dimensions count :/ – bmike Mar 18 '14 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 Mar 18 '14 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 Mar 18 '14 at 12:04
  • @Nick Super awesome.. in case you want some external clickers on this page.. ping somewhere..! SVG FTW!!! – Lipis Mar 18 '14 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.stack.imgur.com/hAB6q.png ...this is gonna be a fun, interactive, blog post on SSL :) – Nick Craver Mar 18 '14 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 Jul 23 '14 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/share-sprite-new@2.png?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

  • 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 Mar 18 '14 at 8:16

You must log in to answer this question.

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