:hover with rounded corners lags in IE8
Hello,
I have an element (text) which when you hover over it has a rounded border. When you hover in IE8 though, it shows square corners for about 1/2-1 second, then rounds them. Is there any way to prevent this from happening?
All other rounded corners on the page are instantaneous when the page loads (so you could never tell they were square in the first place).
Code:
.header-menu1-item{
display:inline-block;
*display:inline;
float:left;
@include single-text-shadow(rgba(255,255,255,0.75),0,1px);
@extend .pie-element;
color:black;
font-size:16pt;
margin-right:10px;
margin-top:3px;
padding:5px;
padding-left:10px;
padding-right:10px;
-pie-watch-ancestors: 1;
cursor:pointer;
}
.header-menu1-item:hover{
color:white;
background:#353535;
@include single-text-shadow(black,0,-1px);
@include single-box-shadow(black,0px,0px,2px,1px,true);
@include border-radius(8px 8px 8px 8px);
@extend .pie-element;
}
Any ideas? I really don't want to revert to images for IE.
Thanks,
Matt
Forums
