Fade in PNG fix for IE8 - javascript

I am using the jQuery Cycle plugin to fade in an animation. This works fine on everything except for PNG files having half transparent pixels in them in IE8. The half transparent pixels are black during the fade.
Things i tried:
Unit PNG : Solved it, but messed the CSS up so bad that it even makes it worse.
jquery.pngFix.js : Doesn't do anything.
Malsup's cycle tips: cleartype:false (no result) and cleartypeNoBg: true (Works, except for the fading itself).
Adding BG-color: Works, but i'd like to background to be transparent. It doesn't work to add a transparent BG image.
Trying X-UA-Compatible mode : Doesn't do anything.
Any guesses?
JSFiddle here: http://jsfiddle.net/HaEym/

It's not glamorous, but you can replace png's with gifs using IE specific css hacks. Once I had to show the PNG (because the gif was LQ, so after the animation I replaced the gif with the png.
For specific examples see another Stack Overflow

Related

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.

IE GIF/PNG Transparency issue with jQuery

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.

Mobile Safari SVG rendering issues with raphaeljs

I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with.
The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's the same thing it does when you click on a hyperlink. The gray box is very ugly in this situation. Is there any css property to tell mobile safari not to do that?
The second issue is with animations. For the duration of any animation, mobile safari adds an ugly black border to the svg canvas. It's only visible while an animation is in progress, and it is only visible on the bottom & right edges of the canvas. Any idea how to fix this?
This was taken using a copy & paste of one of the demos on raphael's page, just with a white background.
This article has some useful tips, namely...
Disabling the selection flash:
Turns out there is a way to turn this off through the use of the WebKit CSS property -webkit-tap-highlight-color, and setting the alpha of the color to 0, in my Javascript code does the trick:
document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
and Disabling the "action" pop-up:
The second thing I needed to disable is the “action” popup that appears if you tap and hold the contents of the UIWebView for a few seconds. This is also controlled through a CSS property called -webkit-touch-callout, and setting that to “none” in this case does the trick:
document.documentElement.style.webkitTouchCallout = "none";

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