This image best illustrates the problem:
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:
- Tried adding a 2px border to slideshow images, which solved a barely-related problem with CSS3 transforms.
- Reverted scaling algorithm, which I had modified to never crop images.
- Added exact same image files used in the demo.
- Tried adding a
box-shadow
to trigger smoothing. - 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. - Confirmed that the SuperBGImage works as expected with jQuery 1.3.2 (demo) and 1.6.2 (project).
- 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/