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):
An example of 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?