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