IE8: Pupup DIV jumps to upper-left corner on show/hide

[kostrse]

The problem

When I trying to apply rounded corners to static content - everything is fine in IE6/IE7/IE8 as expected.

When I trying to apply rounded corners to content that hidden by default (display: none) and displayed (display: block) by javascript on user interaction (popup menu - for example) then in IE6 and IE7 everything works as expected, but in IE8 I can observe jumps of showed up DIV into upper left corner and then jump again to its original (correct) position.

It is the IE8-specific behaviour, even in IE7-emulation mode (Internet Explorer Developer Toolbar F12 \ Browser Mode and Document Mode: IE7) works fine.

Example for reproduction: http://80.71.45.31/IE8_Bug/index.htm Screenshot of the bug: http://css3pie.com/forum/download/file.php?mode=view&id=170 DOM snapshot during the beg reproduction: http://css3pie.com/forum/download/file.php?mode=view&id=171

Browser versions:

• Internet Explorer 6 - works fine;
• Internet Explorer 7 - ?
• Internet Explorer 7 emulation in IE8 - works fine;
• Internet Explorer 7 emulation in IE9 - works fine;
• Internet Explorer 8 - 50%/50% doesn't work
• Internet Explorer 8 emulation in IE9 - 100% doesn't work
• Internet Explorer 9 - works fine using native border-radius implementation

Similar issues:

• https://github.com/lojjic/PIE/pull/165

[JeroenKnoops]

I've got exactly the same issues..

[webaware]

You just need to tell PIE that the popup has moved when you display it. Trigger an "onmove" event for it, as described below: http://snippets.webaware.com.au/snippets/telling-css3pie-about-dynamic-elements/

[JeroenKnoops]

The "onmove" trigger did the trick! :) Thanks!

[kcrwfrd]

I had the same problem on a drop-down menu. ul#nav li:hover ul { display:block; } was used to show the dropdown. Adding -pie-watch-ancestors: 1; helped a bit, but there was still a flicker.

I modified it so that instead of using the display property to switch between none/block, I used visibility:visible; to show the drop down. Works quite nicely.