4

This image best illustrates the problem: screenshot comparison

I'm customizing a WordPress theme that uses SuperBGImage. In Safari 5.1 and Chrome 13, when resizing the browser window, images aren't anti-aliased smoothly and artifacts are clearly visible. You can readily compare the SuperBGImage demo to the production site...

SuperBGImage Demo vs. My Project

I've added demo images to the WordPress site (personal category) for direct comparison. The image of the cherries is the most obvious.

I've been working at this for a while, and have attempted the following to no avail:

  1. Tried adding a 2px border to slideshow images, which solved a barely-related problem with CSS3 transforms.
  2. Reverted scaling algorithm, which I had modified to never crop images.
  3. Added exact same image files used in the demo.
  4. Tried adding a box-shadow to trigger smoothing.
  5. Diff'd all modified JS and CSS trying to find a potential oversight. (image-rendering: optimizeQuality; and -ms-interpolation-mode: bicubic; have remained consistently intact.
  6. Confirmed that the SuperBGImage works as expected with jQuery 1.3.2 (demo) and 1.6.2 (project).
  7. Built a simplified demo and confirmed that the problem is not with my modified SuperBGImage JS. (Only difference is cropping method.)

When viewing the SuperBGImage demo, you'll notice smoothing take place about half a second after you've released the adjusted window. This subtle shift is absent from my project, though it used to be working. Does anyone know what could cause this difference?

Unlike most projects, I regrettably don't have this in source control so I can't just step back through revisions to isolate the problem.

For those who'd like to fiddle with a simple demo: http://jsfiddle.net/4ZcPF/

Matt Stein
  • 3,053
  • 1
  • 19
  • 35
  • On my browser (chrome13 for linux), background images are anti-aliased – Peter Aug 19 '11 at 21:32
  • Thanks, Pedro. It might be worth noting that I've only tested thus far on a Mac running Lion. Your background images were anti-aliased in both the demo and WP example? – Matt Stein Aug 19 '11 at 21:35
  • yes http://i.imgur.com/lMGUr.jpg And the fiddle demo also looks great – Peter Aug 19 '11 at 21:37
  • Well the plot thickens. Thank you, sir. – Matt Stein Aug 19 '11 at 21:43
  • On windows 2008 and don't see any noticeable difference with FF or Chrome between both websites while resizing. – CraigW Aug 19 '11 at 22:03
  • Thank you, Craig! I swear I'm not crazy... – Matt Stein Aug 19 '11 at 22:05
  • I feel a little bit difference between the two. At least for my MacBook//SnowLeopard//Chrome 12.x. see: http://twitpic.com/6b0aun/full Otherwise, in Windows XP, shows no difference. Maybe this is a Mac OS X specific problem. – shr Aug 25 '11 at 11:51
  • I should have mentioned that I'm running Lion on a Mac Pro. I think you're right that it's an OSX+Webkit issue, I'm just at a loss for what obscure property or action triggers the issue. Clearly webkit is capable of scaling the images smoothly, and something is interfering or directing otherwise in the ugly case. – Matt Stein Aug 25 '11 at 14:35

1 Answers1

0

The answer is to use this CSS3 property:

-webkit-optimize-quality

This is the proper solution, although it may or may not be effective for the following reasons:

  • The interpolation quality was considered an implementation detail until very recently (meaning the browser could have random results and be valid by rules of the standards bodies).

  • This property was strongly advocated by artists, actually because they wanted to be able to turn off high quality scaling for pixel art. It took over a year of debate to get everyone to agree on it.

  • The webkit patch was just checked in to support this in May 2011, so the time for it to be actually in a Safari update that your users have will take a little while.

IE and Firefox have had working solutions for a while under proprietary CSS properties.

Eventually this property will drop the webkit prefix and become a standard across all browsers.

If you want the gory details behind the development, see this thread: http://code.google.com/p/chromium/issues/detail?id=1502

whitneyland
  • 10,632
  • 9
  • 60
  • 68
  • Thanks for the answer, though I'm still unsure how it relates to the discrepancy between the two examples. Perhaps being on the edge just invites obscure rendering problems. Where might one find such a property documented, since it's obviously not part of any standard? Googling it brought me back to this page :( – Matt Stein Aug 29 '11 at 18:24
  • @Matt, right now it's only documented in the browser engine developer forums and not fun to read standards documents, more will trickle out over time. A lot of people don't have an eye for these kind of "small" quality issues, but it looks like a few of us want this to be done consistently and right. – whitneyland Aug 29 '11 at 20:44