CSS3 PIE Forums
http://css3pie.com/forum/

Problem with dynamically positioned element
http://css3pie.com/forum/viewtopic.php?f=3&t=303
Page 1 of 1

Author:  kbauman [ Mon Dec 06, 2010 5:46 pm ]
Post subject:  Problem with dynamically positioned element

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:

Code:
        background-color: #fff;
   border: 2px solid #82a6bc;
        display: none;
   float: left;
   padding: 8px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: #7c7e79 5px 5px 5px;
   -moz-box-shadow: #7c7e79 5px 5px 5px;
   box-shadow: #7c7e79 5px 5px 5px;
        behavior: url(/PIE/PIE.htc);


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.

Author:  jason [ Mon Dec 06, 2010 6:50 pm ]
Post subject:  Re: Problem with dynamically positioned element

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?

Author:  kbauman [ Mon Dec 06, 2010 6:56 pm ]
Post subject:  Re: Problem with dynamically positioned element

Hi Jason,

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

Author:  kbauman [ Tue Dec 07, 2010 11:55 am ]
Post subject:  Re: Problem with dynamically positioned element

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

Attachments:
File comment: The hover is over the number, which is where the flyout content is, but the border, and box shadow is off to the left.
pie.jpg [27.49 KiB]
Downloaded 334 times

Author:  jason [ Tue Dec 07, 2010 9:10 pm ]
Post subject:  Re: Problem with dynamically positioned element

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?

Author:  kbauman [ Wed Dec 08, 2010 1:44 pm ]
Post subject:  Re: Problem with dynamically positioned element

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

Author:  kbauman [ Wed Dec 08, 2010 3:58 pm ]
Post subject:  Re: Problem with dynamically positioned element

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

Author:  jason [ Wed Dec 08, 2010 4:45 pm ]
Post subject:  Re: Problem with dynamically positioned 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.

Author:  kbauman [ Thu Dec 09, 2010 10:49 am ]
Post subject:  Re: Problem with dynamically positioned element

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

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/