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.
Steps:
- 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.
Forums
