Solving PIE Instability During Load
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
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.