I have hidden elements on a page that are used as modal boxes, help bubbles, and tool tips. They are dynamically positioned using javascript to line up with a target element. The problem I am having is that after the first successful positioning, the css3pie generated drop shadow is in the wrong position for about 1/2 second. It then moves into the correct position. I've tried numerous javascript and css based solutions with no success. My css looks something like this:



The only solution I've come up with is to create a hidden element that is attached to every target element, as the problem seems to be tied to the pages initial rendering.

Hey there Kevin,

Are you using the new beta3 build? There was a change that went into the release that slightly changed how style.display modifications are handled. I'm wondering if this change would affect what you're seeing.

Also, are you seeing this in all IEs or only IE8?

Hi Jason,

Nope. I'm on beta2. I'll give beta3 a shot, and let you know how it goes. Thanks!

Unfortunately, beta3 did not fix it. I've attached a screen image of the problem.

Well poop.

So I can get a better understanding of your setup... when you show the bubble, does it set display:block and then set the left/top? The other way around?

Does the 1/2 second delay occur in all versions of IE or just IE8?

I think I'm getting close. If I add display block, then remove, and add the element back it's looking pretty good.

What ended up working is this flow for IE8:
1.show the element
2.position the element
3.remove the element
4.append the element back to it's parent

For FireFox and Chrome the flow is slightly different:
1.position the element
2.remove the element
3.append the element
4.show the element

Glad you found a flow, but YUCK!

If it's the showing/hiding that's missing it up, as I suspect it is, you might try changing it to repositioning off the screen (e.g. left:-999px; top:-999px;) instead of setting display:none.

I'll give that a try as well. It would be cleaner.