fading problem with i.e 11

[mafox296 1 Likes (Newbie)]

You have helped me before, so please indulge me.I know you have answed related topics before but here is a very simple codepen. In the live program I have images instead of text. In chrome and firefox I have no problem, but IE 11 doesn't fade. Also it I  use .set($lines,{opacity:0}) this does not work in IE.

Thanks

See the Pen KddPgP by mafox (@mafox) on CodePen

[PointC 8,599 Likes (Superhero)]

I just took a look at your pen in IE11 and the words are fading on correctly. I also checked IE10 and it all looks fine to me.

[Jonathan 5,176 Likes (Superhero)]

im with PointC on this. I tested earlier, and see the fade in as well in latest IE11 in Windows 7 (64 bit)

 

Your fade in duration is pretty long but I did see it fade in with your codepen example above.

 

Are you in IE compatibility mode? Because that would cause things to not render the way there supposed to due to that rendering mode being very buggy, and for older non modern websites.

 

[mafox296 1 Likes (Newbie)]

There appears to be an interaction involving the styles. I have two images a line drawing and a picture. I wanted them both to have a position of relative. The second image is now invisible.To make the second image visible I had to set its position fixed. Now, the required fading occurred in chrome but in IE the picture (position:fixed) does not fade in and out, but the drawing (position:relative) does.I have attach a folder with the code and styles.

Thanks  

I see that I can't just provide a folder so I have added all the files except the picture which is too large, the example and structure is very simple. If you need more simplfication I can provide another small drawing instead of the picture, also aURL.

I modified my original code pen and made both lines and glass posoition:relative and that works so there is something about my attaced css file that I do not understand. I would vermuch appreciate your help.

See the Pen BoodNR by mafox (@mafox) on CodePen

opacity.html

styles.css

[Jonathan 5,176 Likes (Superhero)]

mafox296, I was looking at your files and the codepen but it was hard to see what you were trying to do. Since the codepen was missing images. and your example to download was missing a image with images not matching the css size and layout.

 

Basically when you setup your markup with relative and absolute positioning. Your parent element with position relative gives you full control of its children that are positioned absolutely inside it.

 

It is always best practice to first setup your parent div or element with position: relative; .. think of it as an anchor point or stage for all your other elements that will be positioned inside it absolutely. So all your elements that are positioned inside your parent element, will be absolutely positioned, relative to their parent. This way you can absolutely position your elements within its parent and have their top/left position be relative to the parent with position relative.

 

By setting up your page the way I describe you guarantee that your css and html markup will work cross browser. Once your elements are setup with all your html markup and css... Then you can animate with GSAP, knowing that the elements will animate consistently due to the html markup and css being rendered properly on page load.

 

So your html markup should be like you have, but your css would need to have your position relative and absolute reversed.

<div class="panel"> <!-- position:relative; -->

        <div id="bg"> <!-- position:absolute; -->
            <img src="art/Bitmap 1-2.png">
        </div>

        <div id="lines"> <!-- position:absolute; -->
            <img src="art/stainedglass3.png">
        </div>

         <div id="glass"> <!-- position:absolute; -->
            <img src="stained-glass.png">
        </div>

</div>

If your #panel div needs to be positioned absolutely you can still position with top and left CSS properties, since the position property is set to relative. But if you need the #panel div out of the flow of the document (positioned absolutely). Then just wrap your #panel div with another div, setting its position to absolute.

 

Usually if you nest elements with position absolute inside one another with no parent set to position relative, you will have issues cross browser. This is due to the absolutely positioned elements using the root element (html or body tag) to calculate layout from. Different browsers will calculate and behave differently based on their visual box model. By following these guidelines you wont have to worry about IE or other browsers behaving poorly due to the html markup and initial layout. Giving you full control of where your elements appear on the page

 

So if you take anything from all this, just keep in mind that any time you setup any absolute positioned element(s), you should always have it be relative to one of its parent for full control of your layout. Also setting their width and height to the images inside them, since absolutely positioned elements will take up their parents width and height. It will save you time and hair pulling when dealing with cross browser flim-flam

 

But if you can provide an example of what your trying to achieve im sure we can figure out the IE foolishness.

 

Resource:

W3C Spec - Absolutely Positioning: http://www.w3.org/TR/CSS21/visuren.html#comp-abspos

[mafox296 1 Likes (Newbie)]

I have taken your advice and made the outer Div, the panel's, position relative, and the three subordinate Divs , the ones containing the graphics, absolute. I have also made the styles in-line and the three graphics, the background, a line drawing, and a simple pentagon, all with a position absolute.

I expect the code to cause the pentagon, ID = glass, to fade in and out followed by the line drawing, ID = lines, to fade in and out. This works ,as before in Chrome. In I.E version 11, the pentagon just comes up, no fading, disappears, and after a long wait, the delays and the tweening times, as does the line drawing, no fading in or out. Additionally, although I have autoalpha = 0 , the graphics flash briefly, in both browsers. The code then sets this to 0; I attach the code plus the three graphics, also the URL of the example. Yes I still have a little hair left.

Thanks,

Michael

 

URL of example.

http://michaelafoxorg.ipage.com/Opacity/opacity.html

 

 

opacity.html

[Jonathan 5,176 Likes (Superhero)]

Ok what i did was setup a code pen demo example for you. This way, all of us in the forum  can edit your code live.

 

See the Pen Boobwo by jonathan (@jonathan) on CodePen

 

The above example was tested and works consistently in Firefox, Chrome, and IE.

 

The reason IE was griping was due to your CSS. You were declaring all position top, right, bottom, and left;

 

In CSS you either declare either top or bottom .. not both! The same with left and right.. either declare left or right.

 

Also you just need to set position absolute on your img tag parent divs. And you were using autoAlpha in the CSS which is a GSAP property for the CSSPlugin

 

Your CSS edited with comments:

.panel {
  position: relative;
  width: 700px;
  height: 500px;
  top: 0;
  left: 0;
  /* either use top or bottom ... left or right .. but not both */
  /*right:0; 
  bottom:0;*/ 
  background-color: #0000ff;
  overflow: hidden;  
}

#bg {
  width: 700px;
  height: 500px;

  /* #bg does not need to be positioned absolutely since it is
     just a static element that is behind all your other elements */
  /*position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0; 
  overflow: hidden;*/
}

/* target just the '#glass' div not the '#glass img' tag */
#glass {
  position: absolute;
  top: 40px;
  left: 200px; 
 
  /* autoAlpha is not a CSS property. But a GSAP JS property, 
     thats why IE was failing, use visibility:hidden instead */
  /*autoAlpha: 0;*/
  visibility: hidden;
}

/* target just the '#lines' div not the '#lines img' tag */
#lines {
  position: absolute;
  top: 0px;
  left: 0px;
  
  /* autoAlpha is not a CSS property. But a GSAP JS property, 
     thats why IE was failing, use visibility:hidden instead */
  /*autoAlpha: 0;*/
  visibility: hidden;
}

Your JS edited:

// wait until DOM is ready
$(document).ready(function() {
// wait for images and links to load
$(window).on("load",function(){
  
  // make sure to declare your 'var' variable for your 'tx' TimelineMax instance
  var tx = new TimelineMax(),
      $lines = $("#lines"),
      $glass = $("#glass");
  
  // You can place your GSAP set() methods before your main to() tweens to
  // make sure all your additional properties are setup before you animate
  TweenMax.set($lines, {
      autoAlpha: 0
    });
  TweenMax.set($glass, {
      autoAlpha: 0
    });
  
  tx
    .to($glass, 3, {
      autoAlpha: 1,
      ease: Power2.easeOut
    }) 
    .to($glass, 3, {
      autoAlpha: 0,
      //delay: 1,
      ease: Power2.easeOut
    },"+=1") // use position parameter instead of delay since your using TimelineMax
    .to($lines, 3, {
      autoAlpha: 1,
      ease: Power2.easeOut
    })
    .to($lines, 3, {
      autoAlpha: 0,
      //delay: 1,
      ease: Power2.easeOut
    },"+=1"); // use position parameter instead of delay since your using TimelineMax
  
}); // end window load  
}); // end dom ready

Taken from CSSPlugin Docs:

 

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});

Resources:

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

GSAP Position Parameter: http://greensock.com/position-parameter

GSAP CSSPLugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

MDN CSS Docs : https://developer.mozilla.org/en-US/docs/Web/CSS

 

i hope this helps!