Forums
View unanswered posts | View active topics It is currently Sun Nov 23, 2014 11:16 pm



Reply to topic  [ 2 posts ] 
 Solving PIE Instability During Load 
Author Message

Joined: Fri Nov 30, 2012 4:44 pm
Posts: 1
Post 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.


Attachments:
PIE.htc [651 Bytes]
Downloaded 280 times
Fri Nov 30, 2012 5:18 pm
Profile

Joined: Thu Nov 29, 2012 6:23 am
Posts: 3
Post Re: Solving PIE Instability During Load
Hi,

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.

Thanks


Fri Nov 30, 2012 9:17 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.