CSS3 PIE Forums

Solving PIE Instability During Load
Page 1 of 1

Author:  modernwes [ Fri Nov 30, 2012 5:18 pm ]
Post subject:  Solving PIE Instability During Load

Hey Everyone,

This topic relates to CSS3PIE v1.0.0.

I'm a web developer at Modern Earth Web Design (modernearth.net) and we've been working with CSS3PIE on a number of website where we needed various CSS3 effects on elements. One problem we've encountered however, is that sometimes during page load the CSS3 styles would become displaced or load incorrectly on elements.

After a bit of experimentation with CSS3PIE, I discovered the include guard in the .htc files doesn't actually work and that for every element you bind it to it executes the code. My best guess at this is because IE loads the CSS asynchronously so you could have any number of .htc files executing in tandem for some lovely race conditions. It seems that this problem in-combination with not properly detecting when elements are ready causes the drawing of the elements to be thrown off.

So what's the solution?

The solution is to use a modified .htc file that waits until both PIE and the element are loaded in combination with the PIE.js file.


  • Include the PIE.js file in the <head> of your page.
  • Use the modified .htc file attached to this post in your CSS
  • ?????
  • Profit!

You might notice a bit of a delay for the styles when loading your page but you can also play with the intervals in the .htc file to determine when everything is properly loaded.

One huge benefit to using this method is the fact that you can then combine your PIE.js file with your other JavaScript to save on HTTP calls and then use the lightweight .htc file and CSS to target your elements.

PIE.htc [651 Bytes]
Downloaded 836 times

Author:  aravim5 [ Fri Nov 30, 2012 9:17 pm ]
Post subject:  Re: Solving PIE Instability During Load


I am also facing similiar problem with htc file of css3pie on ie8. I have tab component with in each tab there are pretty big form for which i have extensively used css3pie styling for gradients, rounded corners, shadows. The problem is arising when i move from one tab to other tab. The layout is getting displaced and comes to original position once they htc renders all the css properties. I have been try to break this zinx but couldn't find a right fix for it so far.

Can you please help with this.


Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group