Behavior not applied to content loaded offscreen
I'm loading page content via AJAX into an offscreen div, and rounded corners are not being applied in IE 8.
I create the content offscreen (inside a div with left:100%), then animate the left position to '0' so it slides into view. I tried changing the left position to 50% and it seems to apply the behavior.
If I load the page directly, the behavior is applied and the shape has rounded corners. This is the markup created when the page initially loads:
Code:
<css3-container style="Z-INDEX: 300; POSITION: absolute; DIRECTION: ltr; TOP: 165px; LEFT: 36px"><background style="POSITION: absolute; TOP: 0px; LEFT: 0px"><group2><shape style="POSITION: absolute; WIDTH: 675px; HEIGHT: 675px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px"><fill></fill><fill></fill></shape></group2></background></css3-container>
I then trigger an ajax load (again, the containing element is off screen), this is the resulting markup:
Code:
<CSS3-CONTAINER style="Z-INDEX: 300; POSITION: absolute; DIRECTION: ltr; TOP: 0px; LEFT: 0px"></CSS3-CONTAINER>
Thoughts?
Thanks!
John
Forums
