Jump to content
Search Community

IE8 transparency bug,beg for help me..

linhaiforest 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

I want to be crazy, this issue and GSAP little relationship, but when doing animation, because it is compatible with damn IE8 !!!


The code is as follows, the parent element set the transparency of 100, sub-elements If you set the transparency 0, and is a block element, and positioning to the picture above, then ie8 will show a broken element, this element background color and body the same background


<div class="box">
  <div class="position">
    <span class="txt">some text..</span>
  <img src="images/s1.jpg">

  /*Must be set because the simulated gasp appears from 0 transparency (final 100)*/
  /*Need to position the text on the picture*/
.position .txt{
  /*Need to hide waiting for the animation to show up,Float is because the need for block-level elements can be transparent*/






Masters, how can i do?


Link to comment
Share on other sites

Hello @linhaiforest and welcome to the GreenSock forum!

  • What is the GSAP code you are using?
  • Do you have a live example?


Keep in mind that Microsoft does not even support IE8 anymore ;)


The CSS background-color property is not inherited based on the spec. So you can set a specific background-color:transparent; on that child element that renders black. But something is causing it to render black by another CSS rule, so you need to inspect in IE8 to see what is overriding the background-color. 


Usually a transparent png will cause that black box. IE8 png transparency bug or opacity black box can be corrected by using the following Microsoft proprietary filter

.element-with-opacity-or-png {
   background-color: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */ 
   zoom: 1;


But without using a png and you see this blackbox we will need an code example to see what your code looks like in context.


Your better off letting GSAP handle the cross browser opacity by using autoAlpha. GSAP will use the right vendor prefix for all browsers, even as far back as IE6. When using autoAlpha you just have to add the CSS property visibility:hidden to your CSS style sheet to the element you will be animating opacity on. So you dont have to worry about adding filter: opacity() or opacity in your CSS style sheet.


autoAlpha is part of the CSSPlugin: https://greensock.com/docs/Plugins/CSSPlugin

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

    //fade out and set visibility:hidden 
    TweenLite.to(element, 2, {autoAlpha:0}); 
    //in 2 seconds, fade back in with visibility:visible 
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});


Also to better help you please create a limited codpen demo example so we can test your code live and in context within the browser.



Thanks :)



  • Like 2
Link to comment
Share on other sites

In addition to Jonathan's solid advice, I'd offer:


If I remember correctly, IE8 has some issues with displaying nested elements with filters, and it's not something that GSAP can "fix". IE8 is just a terrible, terrible browser and there's such a tiny amount of the web using it (plus it's so expensive to support), that I'd strongly recommend dropping support for it. Most developers and libraries have dropped support a long time ago, including Microsoft itself ;) 

  • Like 4
Link to comment
Share on other sites

autoAlpha is ok!!  and can almost fix this problem.

But nothing to do with background-color:transparent , I tried,there is not a color, but hollowed out, showing the page the most primitive (body) background color

CSS property filter: inherit  It seems no effect,

Codepen i like it, but it does not support ie8, so there's no way to go there for example.


thank!!!! you are all very worthy of respect!

Link to comment
Share on other sites

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...