CSS3 PIE：圆角减慢IE9，即使它本机支持 [英] CSS3 PIE: rounded corners slow down IE9, even though it supports them natively

问题描述

我使用 CSS3 PIE 在IE7 / 8中添加对圆角的支持。我发现当页面上有许多圆角的元素时，在启用PIE时，在 IE9 中的性能会大幅下降：滚动变得滞后，简单的悬停效果（如链接颜色变化）变得显着延迟等。

但是根据PIE自己的文档，如果浏览器支持你使用的特定CSS3功能，PIE在IE9中什么都不做。理论上，如果我只使用border-radius（IE9支持），启用PIE应该不会影响性能。

这可能是什么原因？ / p>

解决方案

我向所有元素添加了 -pie-poll：false; 在应用了PIE的页面上，这显着增加了IE9，这与IE7 / 8相当。我相信默认情况下，PIE轮询所有元素每250ms更新;将 -pie-poll 设置为 false 可防止在元素呈现和/或交互之前发生任何更新。 / p>

这仍然不能解释为什么 PIE在IE9中轮询未使用任何非本机CSS3功能的元素，但它会解析问题。

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?

解决方案

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.

这篇关于CSS3 PIE：圆角减慢IE9，即使它本机支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！