PIE.htc and jQuery animation conflict?

Question

I have a series of bullets that will appear in succession. I'm using jQuery and jQuery UI in the animation of the bullets. The top bullet needs to have rounded corners which I am using CSS and PIE.htc to accomplish. This works great in all non-IE browsers as well as IE8, but in IE7, the first bullet appears with it's background about 80% to narrow and about 95% to short (or perhaps it is extremely offset to the top left).

Interestingly, if you resize the broswer window at all, the background snaps into proper place (not the bullets are in a fixed width container so I am not resizing the bullets here). If I comment out the PIE.htc line in my CSS the bullet shows up properly, but I need the rounded corners. See this image.

Relevant code follows

JS

$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow');

CSS

.bullet
{
 display:none;
 color:#6e6e6e;
 min-height:40px;
 font-size:2.5em;
 line-height:1.5em;
 font-weight:normal;
 position:relative;
 padding:25px 20px;
 margin-top:1px;
 background:#eeeeee;
 border-bottom:1px solid #fff;
}
.bullet.first{
 margin-top:0;
 -moz-border-radius:8px 8px 0 0;
 -webkit-border-radius:8px 8px 0 0;
 border-radius:8px 8px 0 0;
 behavior: url(/Content/PIE.htc);
 }
.bullet.currentBullet{
 background:#d98452;
 color:#fff;
 }

Ahhh .htc devilery! I would much rather drop IE support or delegate to a different dev. — Raynos, Jan 05 '11 at 15:53

score 4 · Answer 1 · answered Feb 02 '11 at 08:11

http://jquery.malsup.com/corner/

Use this jquery plugin to get round corners in all browsers. No corner images, uses nested dv to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.

score 1 · Answer 2 · answered Jun 06 '11 at 09:35

Try adding a callback to do a resize after the effect, this should cause the element(s) to redraw correctly.

$([appripratebullet]).addClass('currentBullet')
                     .fadeIn('slow', 
                             function() {       
                                 if ($.browser.msie) {
                                     $(this).each(function() { $(this).resize(); }); 
                                 }
                             });

score 0 · Answer 3 · answered May 20 '14 at 08:33

I make this answer for anyone who face this problem and can't solve by these answers,even though this question is quite old.Even jquery.corner.js is great,but it can't be used on input element.

Using this simple method after animation is done can make pie.htc perfect:

function fixButton() {
    if ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && document.all)
        $("body").height("99.9%"); setTimeout(function () { $("body").height("100%"); }, 0);
}

PIE.htc and jQuery animation conflict?

3 Answers3