I've developed a simple click game where you click an image and it gets replaced by another image. The first image is faded out and the next image is faded in using jQuery/animate/toggle.
After each animation the anti-aliasing on all images is lost for a second. It then reapplies anti-aliasing to all images.
Is it possible to force anti-aliasing constantly or force it to refresh faster so there's no time where images are not anti-aliased?
For me, in an embedded WebKit on Mac OS X, using this (non-standard) CSS works to preserve the antialiasing of images during CSS animations:
img {
image-rendering: optimizeQuality;
}
This may not work for other browsers, of course. The mozilla.org site claims that this behave as an alias of 'auto' but it definitely changes the behaviour in WebKit.
Related
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
Please have a look at this: http://www.eymy.nl
The transition works smoothly in all browsers, but becomes jerky in Safari when the images are scaled down (when the window height is smaller than 1227 pixels, which is the 100% height of the images). In other words, Safari cannot handle this transition together with scaling.
My guess is that it CAN, but needs different code. I tried different slideshow scripts and the results are always the same, the moment the images are scaled (down OR up) the transition in Safari becomes jerky.
Any advice will be greatly appreciated!
I'm using Chrome and Safari on a i7 MacBook Air and it was smoother in chrome. After the first image loaded in Safari which was choppy it looked OK. Since this seems like an issue of images loading before they are animated I would suggest preloading them. This is usually done in the body tag with JavaScript or you can also use CSS. See this page for ways to preload images.
I'm having issues with a parallax site I am building using Skrollr.
I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.
When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.
A couple of things I've tried are:
Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
Animate elements using –webkit transition: translate3d
If anyone could shed any light on why I'm getting this page flickering issue that would be great.
I had a very similar issue (i.e. Skrollr / iOS parallax background image 'flicker'). I believe you'll find it's related to this: cubiq.org/you-shall-not-flicker
Simple solution (from the article): -webkit-transform:translate3d(0,0,0).
On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.
Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?
The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.
Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.
It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.
You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).
A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:
img
{
-ms-interpolation-mode: bicubic;
}
use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
i'm using it on one of my sites -> http://iv-designs.org/
you can see the images are clean and not pixelated.
Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:
img { -ms-interpolation-mode: bicubic; }
Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.
Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.
I am dynamically sizing a transparent .gif on my web page using JavaScript. The original image size is around 200x200 pixels and it’s typically resized to between 600x600 and 800x800. In IE8 and FF3, the resized image results in a nice looking gradient where the colors appear to be stretched. However, in older browsers such as IE7 and FF2, the resized image does not show a gradient, but just blocks of the same color. Obviously, there is something built into the browsers that causes this however I am curious if there is a way around this without having to change my original image.
There isn't. Older browsers just take the pixels in the image, and multiply them according to the new size you gave the image.
Newer browsers seem to have more advanced image rendering with anti-aliasing and such, but older browsers just aren't capable of that. If you want the image to look good in all sizes, take the biggest you can and then let it shrink if needed. Upsizing a small image will look ugly, expecially in the old browsers, and there's nothing you can do.
If you are just using it as a gradient, why not just whip up a new one in Photoshop/Gimp that's at the correct resolution for what you need. It will be far simpler in the long run then trying to get an up-scaled image to display properly in all browsers.
It looks like IE7 supports bicubic if you add "-ms-interpolation-mode:bicubic;" to your img css style. I haven't tried it myself, and wonder if it'd work on gifs or if it'd only work on true color images.