IE GIF/PNG Transparency issue with jQuery - javascript

Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!

This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)

I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.

Related

Down-Sized Images are Slow in Chrome

I'm working on a script and have an issue with Chrome.
Here's what I'm doing:
1. Loading large images into a DIV.
2. Scaling the images to fit the size of the DIV.
3. When the browser is resized, the image is scaled up and down with the browser.
Everything is working 100% in all browsers except Chrome.
I've checked the profiler in Chrome and don't see anything unusual.
These are large images, however are working just fine (even live) in all other browsers.
I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.
Nothing special going on, just using a
var img=new Image();
$(img).load(function(){ .... {);
Does anyone know of a workaround or solution that will work in Chrome?
Thanks!
So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.
Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.
So, I'm answering this question with: in this instance, Chrome sucks.
I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.
So to solve it you just add this line to the css if your image:
#myImage
{
image-rendering: -webkit-optimize-contrast;
}
You can turn it off by javascript when the image is still.
More about anti-aliasing: Disable antialising when scaling images
How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.
Some info:
Improving the Performance of your HTML5 App
When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.
Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.
Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.

Scaled Transparent PNGs lose anti-aliasing after jQuery animation in Webkit browsers

I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:
Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)
Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!
Thanks a lot :)
Matt
i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.
in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)
the border is just messed up which is usually the result of a bad scaling algorithm.
try the following to confirm this assumption:
<img src="youricon.png" width="90%" height="90%">
and compare the result in the two browsers. you should see the same problem.
possible solutions:
make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
use a scalable vector graphics format like SVG for your icons.

Jquery Slider PNG black borders IE8

Greetings,
I'm having a lot of trouble with the IE8 buy of getting black borders when using a JQUERY slider, with PNG transparent images.
Using a slightly modified version of the Nivio slider.
I have searched high and low for fixes and blocks of code but so far none have worked.
What happens is that as soon as the img cycles it gets the black border and looks like shit (only in IE8).
Does anyone know a working fix for this?
Or do we just have to ban IE from all computers?
Solutions here: jquery cycle IE7 transparent png problem
As I can recall this generally happens in IE7+ when a PNG with alpha channels is faded in or out, which uses opacity.
As for a fix, I was unable to find one, but there is the cause I believe.

Animating opacity, opacity in general in IE

When IE renders a filter: alpha(opacity=..) whether it's on an image or text. It looks bad.
Is there a way to make IE render normal-browser-like smooth opacity?
If no, how can I easily after a fadeIn (opacity x->1) javascript animation re-render the elements so it doesn't look bad anymore..?
Applying a background colour or an opaque background image to the element should fix this problem. This is due to the way filters work, they're ActiveX components and they're old so they have certain limitations when working with partial transparency.
You can also disable the filter when the animation has completed, using something like:
myElement.filters[0].enabled = false;
A lot of animation libraries use this technique to enable the filter only during the fading so the user will not notice the ugly aliasing as much.
There's another fix (best viewed in IE to understand the point of the post), although it's more of a hack and it's not a good solution in all cases, particularly where you need to alter the size of the image.

Is there a JavaScript PNG fix for IE6 that allows CSS background positioning?

I've seen a few fixes for allowing PNG images to have transparency in Internet Explorer 6, but I've yet to find one that also allows you to set the background position in CSS. If you use sprites, it's a deal-breaker. I've resorted to using GIF's (which are not as high quality), not using transparent images at all, or serving a completely different stylesheet to IE6. Is there a fix for IE6 that allows for PNG transparencies AND background positioning?
Yes. Convert your images to use indexed pallets (png256). You can support transparency (just like gif), but not an alpha channel.
You can do this using Irfanview and the pngout plugin, pngquant or pngnq.
The YUI performance team also did a great presentation that covers this an many other image optimization concepts.
This is a new technique that has popped up in the last month or so. From the page:
In this script image tags are supported, both with and without a blank spacer GIF, and background image PNGs may be positioned, as well as repeated, even if they're smaller than the content element they're in.
When the background is static I use TweakPNG to change the Background Color chunk in the PNG to the correct color (instead of the default gray color). Any regular browser will ignore this because the alpha channel overrules it, but IE6 and lower will use that color instead of the alpha channel.
This means we have transparency in IE7+ while degrading nicely in IE6 and lower. And all css positioning and repeating are possible (because there are no hacks!).
DD_belatedPNG.js works very well
You can actually use pure CSS to get positioned background images with alpha transparency in IE6 by taking advantage of IE6's alpha filters and the CSS clip property. Julien Lecomte describes the technique on his blog.
Note that this technique does result in a performance hit for each use of an alpha filter.
IE PNG Fix v2.0 has support for full alpha+position/repeat.

Categories