2

I'm using CSS3 PIE to add support for border-radius to IE6/7/8. It works perfectly, but I've found that when I use it to apply a "thick" border with rounded corners to a <div>, the border flickers when the mouse moves over it.

I did some testing and found that the flickering occurs only when the border width is 3px or higher, and regardless of any content in the <div> (meaning, it can be completely empty and will still do it).

I searched the CSS3 PIE forums and didn't find an answer; the closest thing I could find sounded very similar, but had to do with using PIE on links rather than <div>s. The fix that was proposed - setting a background property on the element - doesn't work in my case.

daGUY
  • 27,055
  • 29
  • 75
  • 119

1 Answers1

3

I may have solved this myself (or at least negated it)...I had been testing IE8 and 7 by switching the rendering mode in IE9 (I don't have "real" copies of IE8/7 to test). Just for the heck of it, I tried the same page in IETester and there's no flickering at all.

So, since the issue has something to do with IE9 emulating IE8/7, I'll assume it doesn't occur in real installations (maybe HTCs don't execute at full speed under different rendering modes?).

daGUY
  • 27,055
  • 29
  • 75
  • 119
  • it's an interesting point, and worth making. I would never trust the 'compatibility' modes in IE to be an accurate representation of the real thing. We've had issues in the past where IE7 compat mode had significant rendering differences to a real IE7. – Spudley Jul 07 '11 at 12:57
  • I tested it last night, IE7 and 8, and forget to come back and say "I saw no flickering" - so you may well be right if it can't be reproduced, thanks for posting your findings – clairesuzy Jul 07 '11 at 14:18