View unanswered posts | View active topics It is currently Fri Jun 22, 2018 10:48 am

Reply to topic  [ 6 posts ] 
 Positioning errors 
Author Message

Joined: Tue Aug 09, 2011 6:08 am
Posts: 4
Post Positioning errors

I have been using css3pie in a live application almost since about a year ago, and have been grateful for it since I don't need to be throwing around images anymore just for IE7 and IE8 (we don't support IE6). I almost exclusively use it for rounded borders.

However, an unfortunate and recurring problem is the positioning of the css3-containers. Sometimes it has left=0 and top=0, which puts the 'canvas' in the upper left corner of the application, while the element that needed it is on an completely different place.

I have been trying out things with -pie-lazy-init, -pie-poll and -pie-watch-ancestors, which may help in a few cases, but it does not fix all. I remember waiting for beta4, just to check whether perhaps it would work better then, but it did not.
So I had to resort to 'manually' animate the newly created (or made visible) elements to be moved for a pixel and then move that pixel back. Then it looks fine, because css3pie always shifts the canvas to the correct position as soon as the element is moved. It just doesn't always do it correctly when the item first appears.

The repositioning does not happen if I change the width, or if I call onresize() or onmove() on them,.. only when I really move them. So it's a visible shift, even if only for a fraction of a second.

But most of all of course, it's annoying to have to resort to -any- kind of javascript code. I would actually be happy to dive into the htc file and edit something to change the moment when initialisation happens: not right away, but 1ms later. Is this possible? I really believe this would help my case. And yes, users may see a shift then, but I don't really care. It's worse when they see the image on the left, rather than the image on the right (see attachment: IE8 screenshots)... :)

Thank you for any helpful advice.

File comment: Erroneous positioning on the left.
Correct positioning on the right.

css3pie-positioning.png [25.34 KiB]
Not downloaded yet
Tue Aug 09, 2011 6:32 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Positioning errors
Yeah this kind of positioning issue can be very frustrating. Lots of complaints about it recently. Unfortunately no progress yet :/

One reliable workaround, that doesn't involve writing JS, is to wrap the offending element in a div that has position:relative. Since PIE calculates the position in relation to the nearest non-static-positioned ancestor, this ensures that the positioning is always correct since the calculated position will always be calculated as 0,0.

Tue Aug 09, 2011 9:42 am

Joined: Tue Aug 09, 2011 6:08 am
Posts: 4
Post Re: Positioning errors
Thanks for the suggestion, that makes sense of course.

Still a bit cumbersome though to wrap all items, especially if there's also a lot of small ones like buttons that are already programmed... :)

I decided to dive into the PIE code, and made a temporary fix: in PIE.RootRenderer, in the updatePos function (which I found by simply searching the code for "left" :P), I decided to just let the function run a second time in a seperate thread (under certain circumstances). The first run is for every time it does things correctly (and then it's best not to be in a seperate thread, to avoid a flash), and the second time is just in case it failed the first time. It only happens when the first calculated position is [0,0], since I'm assuming it was already correct otherwise.
Still not the most efficient solution, but it works for me :) Perhaps something to add as a -pie- option (or to add to the -pie-poll behaviour) if nothing more solid can be figured out?

Concretely, I declared the function outside of that PIE.RootRenderer construction (..because otherwise I didn't know how to refer to the function to call it a second time), and changed the last line into the following:

var updatePos = function(){
   if( this.isActive() ) {


      if(!this.isPositioned) {
         this.isPositioned = true;

         // If the position is [0,0], schedule another position update, to re-check whether that's correct
         // (this is only executed once for each updatePos call, because of the condition above)
         if(x==0 && y==0) {
            var that = this;

At least, this fixes the issue that I was able to reproduce in my application. I also had a lot of non-reproductable ones,.. so I'll just see whether it still occurs in the future, with this code :)


Tue Aug 09, 2011 1:50 pm

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Positioning errors
Thanks for doing that deep dive! I'm going to give your workaround a try. I'm very curious why that works, but -pie-poll does not.

I agree that this might be a good addition, probably with a custom -pie-x property.

Thanks again :)

Tue Aug 09, 2011 3:15 pm

Joined: Thu Apr 12, 2012 11:32 am
Posts: 1
Post Re: Positioning errors
In my case, I am attempting to fix a problem with the jQuery UI Dialog which is a second modal dialog on the page. The .ui-priority-primary button has a misplaced background, but the non-primary button is placed just fine. After trying all of the above, I tried the following which worked:

var $dialogBox = $("#my-dialog-box");

The drawback is that this would need to be performed on multiple entities, unlike the code above.

Thu Apr 12, 2012 11:41 am

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post Re: Positioning errors
@weatherangel: just tell PIE that the element has moved...

Tue May 15, 2012 8:25 pm
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest

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.