Jump to content
Search Community

IE8 tweening a png - black outline fix?

sorciereus test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening:

var tl = new TimelineLite();
	 tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3})
	 .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2})
	 .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4})
	 .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1})
	 .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2})
	 .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ;

and here is the css

#lens_flare1
{
	opacity:0;
	position:absolute;
	left:22px;
	top:5px;
	background:transparent url('images/lens_flare.gif') no-repeat;

    width:59px;
    height:53px;
	
}

#lens_flare2
{
	opacity:0;
	position:absolute;
	left:73px;
	top:10px;
	background:transparent url('images/lens_flare.png') no-repeat;


      width:59px;
    height:53px;
	
}

#lens_flare3
{
	opacity:0;
	position:absolute;
	left:118px;
	top:21px;
	background:transparent url('images/lens_flare.png') no-repeat;

      width:59px;
    height:53px;
}

#lens_flare3
{
	opacity:0;
	position:absolute;
	left:118px;
	top:21px;
	width:59px;
    height:53px;
    background:transparent url('images/lens_flare.png') no-repeat;

}

#lens_flare4
{
	opacity:0;
	position:absolute;
	left:233px;
	top:50px;
	width:59px;
    height:53px;
    background:transparent url('images/lens_flare.png') no-repeat;

}

Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. 

~julia

Link to comment
Share on other sites

Try using the CSS IE filters:

#lens_flare1
#lens_flare2,
#lens_flare3,
#lens_flare4 {
    background:transparent url('images/lens_flare.png') no-repeat;
    /* IE7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='images/lens_flare.png'); 
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='images/lens_flare.png')"; 
}

Or using javascript to apply the filter in IE (from this link):

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Hope this helps? :)

  • Like 2
Link to comment
Share on other sites

Hm unfortunately this doesn't do the trick - however - if I remove the "scale" in the timelinelite code, the black outlines no longer appear - my design isn't dependent on the objects scaling so for this that's ok - but this seems like something we could try to figure out for the future.

Link to comment
Share on other sites

you.might have to add the CSS property zoom:1 so it tells IE8 that the element hasLayout..

 

If you can provide a codepen example we can better see the black outline your describing.

 

Link on how to create a codepen example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Also are you seeing this in real standalone IE8.. or a higher version through Document & Browser Modes to emulate IE8 ?

 

Thanks

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hello... It might be a inconvenience, but you could uninstall all versions of IE.. and then do a Google search or search on Microsoft to download and install IE8 standalone .exe .. thats what I used to do to test on real standalone IE8.

 

But..

 

XP is no longer supported by Microsoft.. unless you pay them to maintain it. XP was the only version of Windows that forced you to use IE8. Which is the highest version of IE, XP can have.

 

So for me personally, I will stop coding for IE8.. but still code for only IE9 and above.. but thats just me.

 

Ive been waiting along time

 

Anyone still using XP and IE8 will be at risk for security holes and bug updates.. so im very happy XP support updates are dead.. along with IE8.

 

Oh happy day :)

Link to comment
Share on other sites

Hi,

 

This is a very tough debate, whether support IE7-8 or not. When the client doesn't specifically ask for it I create a very simplified version of the website for those browsers and load the CSS and JS using modernizr. When asked to give full support to old versions of IE I reluctantly do it, but charge according to the amount of effort that this task means.

 

For testing IE7-8 I went to a special sale of very old computers. Got a old celeron with enough hardware to run XP. Installed IE7 and a portable version of IE8. I don't let that machine connect to Internet, just in case (blocked the IP in the router) but using a local apache server in my other computer I can test everything in the real browser and for just 100 dollars. Perhaps you can go to a garage sale or a flea market and see what you can come up with. Another option that I use for some projects is Browserstack, is not the best way to test animations, but it definitely helps.

 

Even with microsoft pulling the plug in XP there are quite a few computers out there still using it and they'll keep being a considerable number.

 

My point is that just because someone has an old computer or low end device and doesn't need or can't buy a new/better one it should be excluded. I'm not defending IE8, in fact I HATE IE8 (it's even worst than IE7) but is there and we'll have to deal with it, for how long?, hopefully not much, but people that use it have the same right to access web sites as the one that bought 4th generation core i-7 computer today.

 

Finally GSAP works with IE7-8, and does it very good, well it does it in the same way that in any other browser. The guys have gone through all the motions to make it that way so we can take advantage of that and pass those benefits to the end user. The idea is to make sites and apps that include everyone and not that left people behind. Sure some people will enjoy a better experience, but everyone has the right to access the same content and information.

 

Just my two cents.

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Microsoft started forcing automatic updates to IE in 2012 .. so any non XP computer that has IE would be automatically updated to latest version of IE.. which at this moment ia IE11. Which is part of Microsoft's new auto update practice.. to even force update if automatic updates are turned off .

 

So I know there will be people still out there using IE8.. and im sure there might be people using IE7 - IE6 .. but as for me im done with it, and just charge more to clients for wanting me to code for iE8.

 

Google stopped supporting IE8 last year along with a ton of major websites.. so try to use any Google service or website in IE8 and you will see that Google delivers you to a primitive and limited functional app and website. Sometimes not delivering anything except message telling to download a real browser. Some ecommerce stores even charge an extra percentage to your order at checkout if they detect your browser is IE8.

 

All what im saying is I know GSAP can work even in IE6 .. which is AWESOME..

 

I only build for IE8 if the client pays more.money.. since IE8 has like 4 rendering modes which all render differently.. even rendering on vmware or virtual environments differently.. hours and hours of debugging my life away in IE8... but there is now finally light at the end of the tunnel :)

 

Believe me guys, I understand your point and agree fully.. there will be people who still using IE8 on XP.. but you gotta be happy that the final nail has been driven in IE8.. happy times..

Link to comment
Share on other sites

I'm aware of Google giving it up, but that forced auto-update thing in WIndows... are you sure? I'm on Windows 7 at home with IE8 still installed. I have windows update set to "download, but let me choose to install" and while I've seen the IE9+ updates, I've never been forced to accept them. You also have to consider corporate environments. The company I work for employs thousands, all on Win7, and IT has not pushed any updates to IE so the majority still have IE8 installed unless they've manually downloaded an IE9+ installer, like me =).

 

That said, I totally agree with you, it's nice to be able to leave it out, and chances are that 95% of your site might work "well-enough" in IE8 anyway.

  • Like 1
Link to comment
Share on other sites

Yeah i totally agree Jamie!

 

The US IRS has to pay Microsoft like $30 million dollars just to keep their XP computers to still receive security bug updates for their extended support, since they missed the deadline to update to win7 / win8. So I see what you mean.. a lot of companies and government entities still need to update their Windows computers.

 

Regarding auto-update..

 

Here was that original blog post on Microsoft in 2011, at that time IE9 was the latest version:

 

http://blogs.windows.com/ie/b/ie/archive/2011/12/15/ie-to-start-automatic-upgrades-across-windows-xp-windows-vista-and-windows-7.aspx

 

And here is the article on Microsoft about auto-updates for IE10 / E11:

 

http://technet.microsoft.com/en-us/ie/dn449235

 

http://blogs.msdn.com/b/ie/archive/2013/02/26/ie10-for-windows-7-globally-available-for-consumers-and-businesses.aspx

 

Looks like Microsoft also created a automatic update blocker toolkits for versions of IE10 and  IE11.. if for some reason you don't want the force auto updates:

 

http://blogs.msdn.com/b/ie/archive/2013/01/30/ie10-automatic-update-blocker-toolkit-available-for-windows-7.aspx

 

In IE10 and iE11 .. if you go to:

 

Help -> About Internet Explorer

 

You will now see a checkbox checked, that displays Install new version automatically

 

But I guess we have to make the best of IE .. its like the unwanted cauliflower on your dinner plate. It can stay on the plate, but i am not eating it :)

  • Like 1
Link to comment
Share on other sites

Hey Jonathan,

 

Any reason why you don't have a basic IE7-8 boilerplate?.

 

I'd recommend such practice because is very rare that customers pay to implement "almost" the same site in IE7-8, they're usually happy with something that works and looks OK in those browsers, and for that cases I run a very simple boilerplate, three types of menus, fairly simple animations and content presentations. No round-border, box-shadow PNG's or stuff like that. Those implementations rise the price immediately, so basically almost everyone goes with the simple stuff that I've tested many times and now how it works, so I don't have to spend hours debugging and/or searching google for a specific answer.

Link to comment
Share on other sites

Hey Rodrigo.. Thats a good idea! :)

 

I do have a laptop with Windows XP Service Pack 3 .. that i use for such times that i need to debug IE8 standalone or IE7 standalone.

 

But in my situation it really depends on if i'm building the site from scratch or changing / upgrading an existing site. If I'm customizing different CMS's like WordPress or Joomla..  and eCommerce CMS's like Magento and even crappy Miva Merchant...

 

I have to work with whats there and make it look the same cross browser..  Even having to make my own plugins / extensions, and themes for the CMS. So in those cases i have to debug IE until my eyes fall out of my head.

 

But I see what you mean,  When I make sites from scratch.. i have various different UI elements and code that I already display properly cross browser.. but the majority stuff i debug in IE7, IE8, IE9  general have to do with a variety of display bugs with layout / on different CMS and eCommerce systems. But for IE8 I make it so users don't get all the nice effects.. if they do want them, they can use a real modern browser that supports 3D Transforms.  :)

Link to comment
Share on other sites

FWIW, the way I fix the black outline on transparent images for IE8 is to save out the image as a GIF or 8-bit PNG. You'll lose image quality of course with 256 color limit, but it will work. I only bring in this low-quality sprite for IE8 users using some form of detection, either IE conditionals or modernizr.

 

Hope that's useful :)

Link to comment
Share on other sites

I run into this problem with every site I build.

You have the dilemma of how awesome gsap is and then the fact that 10% of the US still uses IE8.

 

So you have to degrade gracefully...

I always build a super wizbang version of my animations with rotations and opacity, just to run in to the black line of death on all my pngs that are whizzing around the dom in IE8.

 

In my javascript I use an if else like this:

if (!!document.createElement('canvas').getContext && !!document.createElement('canvas').getContext('2d')) {
//TIMELINES FOR MODERN BROWSERS

else{
//TIMELINES FOR IE 8

}

Then I use some scaled back version of my animations, or sometimes just dont provide an animation at all for ie8. It's a trade off you have to learn to live with until this browser eventually dies off...

 

Hopefully this will get you over the hump.

Link to comment
Share on other sites

Hi,

 

Well I got too sucked by the IE support stuff that forgot to add my recipe.

 

What I've found to work in some cases with transparent PNGs (32-bit depth) is set up a mock gradient. As with many things I stumbled into this one. Since colorzilla has a gradient generator that creates CSS gradients with support down to IE6, when I need this type of background I go straight there. Once creating a menu with icons and tooltips, the icons were animated using stagger and some transforms (rotations in modern browsers and scale for older). Once I finished the animation for the good browsers I took a deep breath and set up to see the "damages" in IE7-8. Surprise no black line at all  :shock:.

 

Since then for this cases what I tell the client is that in this cases the background has to be solid for IE7-8, if an image has to be used as background then just simple animations for the images.

 

The trick lays in this code added to the images parent element and using <img> instead of using background images on other DOM element:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-8 */

Since then (actually a a little over a month) I've been using this and works very well. Also the images parent should have an absolute position. I haven't tried other CSS set up since this one seems to work most of the time.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...