IE8 transparency bug,beg for help me..

[linhaiforest]

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>
  </div>
  <img src="images/s1.jpg">
</div>

<style>
body{
  background-color:#000;
  }
.box{
  position:relative;
  /*Must be set because the simulated gasp appears from 0 transparency (final 100)*/
  opacity:100;
  filter:alpha(opacity=100);
  }
.position{
  /*Need to position the text on the picture*/
  position:absolute;
  left:50px;
  top:50px;
  }
.position .txt{
  /*Need to hide waiting for the animation to show up,Float is because the need for block-level elements can be transparent*/
  float:left;
  opacity:0;
  filter:alpha(opacity=0);
  }
</style>

 

Screenshot:

 

 

Masters, how can i do?

thx++++++...

[Jonathan]

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

 

 

[GreenSock]

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  

[Jonathan]

@linhaiforest .. I think you might have to also add the CSS property filter: inherit on your child elements to get around that nested filter bug IE8 has. Thanks Jack @GreenSock for reminding me about that MS IE8 gotcha

[linhaiforest]

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!