Search code examples
performanceinternet-explorer-9delaycsscss3pie

CSS3 PIE: rounded corners slow down IE9, even though it supports them natively


I'm using CSS3 PIE to add support for rounded corners to IE7/8. I've found that when I have lots of elements on the page with rounded corners, performance in IE9 drops considerably when PIE is enabled: scrolling becomes laggy, simple hover effects (like link color changes) become significantly delayed, etc.

But according to PIE's own documentation, PIE "does nothing" in IE9 if the browser natively supports the particular CSS3 feature you're using. Theoretically, then, if I'm only using border-radius (which IE9 supports), enabling PIE should have no effect on performance.

What could be causing this?


Solution

  • I added -pie-poll: false; to all the elements on the page that had PIE applied to them, and this sped up IE9 considerably, to the point that it's on par with IE7/8. I believe by default, PIE polls all elements every 250ms for updates; setting -pie-poll to false prevents any updates from occurring until the element is rendered and/or interacted with.

    This still doesn't explain why PIE is polling elements in IE9 that aren't using any non-native CSS3 features, but it does resolve the problem.