When I apply the rounded corners to a DIV tag, the background image shrinks by about 30 pixels. I tested by removing the rounded corners code: worked fine. I also tested by removing pie from the code: worked fine. this is affecting about a dozen of my websites. please help! below is my code. Yes, I know I have it labeled "fix-pie.php" but that is NOT the issue. I use it that way in about a thousand other places (not exaggerating) and it works fine.

header {

position:relative; width: 980px; height: 300px; margin: 0px auto 0px auto; padding: 0px; background-image: url(style/header.jpg); background-position: top left;

overflow: hidden;

border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px;

behavior: url(fix-pie.php); }

I have a child div with defined height so that it scrolls vertically contained in a parent div that has rounded corners or dropshadow applied through PIE. In IE6 or IE7 the scroll bar flickers and you can't grab the bar to move it up or down.

I have found others with this issue at http://css3pie.com/forum/viewtopic.php?f=3&t=1290

Hi Jason, in this commit I again tried to implement transformation support and succeeded pretty much. It now supports matrix, skew, scale and rotate. So far the translation is still missing, which seems to be due to an error in my translation algorithm. This is also the reason, why its not rotating around the correct transformation origin. This is still something that needs to be fixed to have this working. But I thought, commit early, commit often... :-)

The supported code would be: transformation: skew(30px) rotate(20deg) scale(1.2);

Maybe you have an idea for the translation?

Looks like hell is freezing over, and judging by the IE9 technical previews, it's likely that the final IE9 will support most or all of the Backgrounds & Borders spec. As of right now (June 2010) it seems to already support everything PIE supports, with the exception of border-image and box-shadow.

So we need to figure out what to do about this. Best-case scenario is that IE9 completely obsoletes PIE so we can just version-detect and do nothing for IE9. If that doesn't happen, we'll need to come up with a system to let IE9 render everything it knows how to natively and let PIE only handle the leftovers.

Making PIE run as a .htc behavior has several advantages: users don't have to write any JS, the FOUS is avoided because the behavior is applied as soon as each element is ready, automatic cleanup when the element is unbound, etc.

However it might be useful, especially for third party libraries, to be able to invoke PIE as a pure .js file, without the .htc wrapper. We could expose a PIE.applyTo() element which accepts an element reference or maybe a selector, and a corresponding method to remove it.

We're probably pretty close to being able to do this. We'd have to rework a few things, like the fact that element-specific values are stored as local variables in the .htc would have to be changed so they are stored on the element itself or using a data hash with id indexes like jQuery does. We'd also have to attach the event listeners programatically, and make sure to clean them up on unload to prevent memory leaks.

The resulting .js file would be an addition to the PIE distribution; the .htc would still be the preferred method of attachment for the above stated reasons.

using javascript:void(0) in an href property causes PIE to unload all the event handlers. Tested and confirmed in an html5 page in IE8 standards mode.

Border-image not work in IE9. I see that other users have the same problem. But the documentation says it should work in IE9. It is a bug? Should we do something special to make it work?

Thanks, Regards, Jose

Today i encountered with a ¿bug?, The scenario was this:

Slider with rounded buttons to the side, when the slider loads, it hides the first button because it's not needed (you can briefly see it before it's hidden, it's at the right position and with the rounded borders) but when it's showed the position will be top:0; and left:0; not the one setted on the css.

We came to the conclusion that this is a conflict when hiding an element using display:none;. The weird thing is that when you scrolled, it came to position. Why this happens? Is normal behavior from PIE?

We solved it setting the visibility to hidden, but that's not cool.

Hey Jason,

After much trial and error, I figured got the opacity2 working. It is uber buggy.

Overview: Apparently if fill['opacity2'] is set it will take on the value of fill['opacity'] and then proceed to display at full alpha. fill['opacity2'] appears to be set when the #Default#VML behavior is added to a fill.

In order to get it to work you must set the fill['o:opacity2'] before the behavior is set.

Change 1: What I did is separate out the s['behavior'] = 'url(#default#VML)'; from getShape and put it into a new function applyBehavior. I had getShape call applyBehavior for anything that wasn't a fill. If it was a fill I called the applyBehavior after all the styles attributes had been set.

https://github.com/digitalagua/PIE/blob/master/sources/RendererBase.js - Line 138, Line 145

This is why the other features aren't working. The applyBehavior is either not being called or it is being called at the wrong time. I honestly don't know if this is the best approach, but it works well for the linear gradients.

Change 2: The other buggy piece is when the gradient itself is being set.

https://github.com/digitalagua/PIE/blob/master/sources/BackgroundRenderer.js Lines 365-376

If there are three or more stops IE switchs the starting point for opacity and o:opacity2, because that obviously makes perfect sense.

Possible Change: I experemented with your vmlColors array. In the documentation it looks like you only need mid points not 0 and 1. I did it both ways and the gradients changed slightly, but not enough to notice.

https://github.com/digitalagua/PIE/blob/master/sources/BackgroundRenderer.js Line 351

You might try this instead: // Convert to percentage along the VML gradient line and add to the VML 'colors' value // first and last values are removed for the colors array for( i = 1; i < stopCount-1; i++ ) { vmlColors.push( ( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el ) ); }

All Other Changes: The other changes were trying to get the other features to work.

All that I added was they applyBehavior where I thought appropriate, but I ran out of my allotted time.

sources/BackgroundRenderer.js sources/BorderRenderer.js sources/BoxShadowOutsetRenderer.js sources/ImgRenderer.js sources/RendererBase.js

Oh yeah and I added a couple of files to make navigating the test files easier. tests/index.html tests/toc.html

Feel free to use any of the code or ideas. If you do use it, all I ask for is a credit.

Feel free to drop me an email with any questions or if you want to bounce ideas for integrating this with other pieces of the PIE. Ha.

Thanks,

James Butler Digital Agua

Did some testing and found that things like 'rgba' or 'border-radius' don't work when attached to a :hover pseudoclass. Would be really cool to be able to do this.

see: tests/offset.html

Steps to reproduce bug:

1. Hover your mouse pointing at any one text box
2. Press F5 to refresh the page
3. Repeat step 2, all of the text box the mouse is pointing to the text box after the position will be confusion

Sometimes you can reproduce such documents under IE7 mode

I have a <div> which contains my PIE-d elements. The div has the following style:

position: absolute;
overflow-y: auto;
top: 2.5em;
bottom: 0px;
left: 0px;

When I scroll the content within it, the backgrounds scroll by twice as much as the elements. E.g. the elements scroll up by 100px but the backgrounds scroll up by 200px. This only happens in IE8 Standards mode. IE7 Standards mode and Quirks mode do not display this bug.

I am using the latest PIE 1.x as of 3 Sept 2014.

.somenode {
    behavior: url(/PIE.htc);
    border: 1px solid red;
    border-radius: 5px;
    display: block;
    height: 500px;
    width: 500px;
    margin: 0;
}
.somenode:hover {
    margin: 20px;
}

I found a bug of IE: Sometimes node.offsetTop & node.offsetLeft is not the value we want. setTimeout for 0Ms, we can get right offsetTop & offsetLeft

When I use js version in my project under https. I found IE6 popup "Contain unsafe content " , So I replace this line rs.backgroundImage = 'url(about:blank)'; to rs.backgroundImage = 'url()';

I have no plugins whatsoever, am using the default Modern.IE build of IE8 on Windows 7 and when I load the page I see the following 7 times in IE8 Dev Tools console:

'rootRenderer' is null or not an object _________ PIE_IE678.js, line 4309 character 17