10 Replies Latest reply on May 8, 2014 10:31 AM by websemantic

    Chrome div not rendering when using jQuery fadeIn

    websemantic

      I'm using jQuery within the Adobe Edge Animate (EA) framework. Using EA, I built some icons (essentially a group of nested divs). I hide the icons at the start then reveal them using fadeIn.

      In Chrome, parts of the icon often don't appear. Fine in other browsers. Only when other icons are faded in does the problem icon fully render. An example of image state after fadeIn() has completed (the background div to the cylinder is missing):

      image state after fadeIn() has completed.

      An example of image state once another icon has faded in:

      image state once another icon has faded in

      This makes me think it is a screen repaint issue.

      Here is the code I'm using (IconName.el is the jQuery variable, same as $('#iconID') within EA):

      IconETFMS.el.hide(); IconIFPS.el.delay(1000).fadeIn(1000);

      When animating in EA, I find that if I start the animation on the timeline from opacity 0.01 instead of 0, it renders correctly but I can't reproduce this in jQuery.

      Finally, there are hundreds of lines of code with this pattern so I'm trying to solve without having to rewrite all the code (maybe overload the jQuery function or similar).

      Has anyone else experienced this or similar or got any things I could try please?