PIE doesn't appear to support transparent borders yet. This would be a good feature to have, as other browsers support it, and using padding is not always an option (specificly, when the padding needs to also have an "em" value in it with and without the border, and a mouse-over-only border needs to show).

Tested with IE8.

If there is a container element with overflow:auto, and a descendant element has PIE applied, then when the content is scrolled the CSS3 rendering element will stay in place.

This seems to be worked around fairly easily by giving the scrollable container element position:relative, but would be good to find a fix if it's non-invasive.

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.

CSS3 introduces the calc() function for specifying length values, which allows for useful things like pixel offsets from a percentage etc.

Spec reference: http://www.w3.org/TR/css3-values/#calc

Implement rendering of the 'inset' keyword in box-shadow.

Currently the code will allow this keyword when parsing but will not render it.

There is some partly-implemented code in BoxShadowRenderer.js, which no longer functions but at one point had a fairly good implementation for when the box is perfectly square (no rounded corners). Making this work with rounded corners will require a way to mask one shape with another, so we can create a border which gets blurred and then clipped to the shape of the padding-box. The Compositor filter may be an option.

This comes out of forum posting http://css3pie.com/forum/viewtopic.php?f=4&t=35

Apparently some web communities require themes they distribute to be either compatible with or licensed as GPL2. This means that under the current Apache2 license PIE cannot be included in themes distributed through these channels. It's very important that these communities have access to PIE, so we should relicense under a dual license of GPL2 plus a more liberal license.

See forum posting http://css3pie.com/forum/viewtopic.php?f=3&t=4 -- there is a divide-by-zero error when the element has dimensions of zero.

We should probably avoid performing any rendering whatsoever when the element has no dimensions.

Inclusion of prototype.js (just inclusion, not even calling anything in it) crashes IE8 when PIE.htc is applied.

Forum post: http://css3pie.com/forum/viewtopic.php?f=3&t=19

Testcase committed at tests/submitted/forum-f3-t19.html

The situation

A block-level element with overflow:hidden contains a block-level child with margin. Both elements have PIE behavior attached.

Expected behavior

Because of the overflow setting, the margin should not collapse, but should space the child box away from the parent box.

Actual behavior

• In cases where PIE is attached only to the inner, top margin collapses and background disappears.
• In cases where PIE is attached to both the inner and the outer, the top margin collapses.
• If PIE is only attached to the outer, margin is respected.

Test: http://gordonbrander.com/lab/pie/margin-test/

Using latest alpha release of PIE.

Situation

Block-level PIE element inside of a centered element with constrained width (e.g. margin: 0 auto; width: 700px;). Window is resized.

Problem

PIE elements do not update position after window resize.

Test: http://gordonbrander.com/lab/pie/window-resize/

PIE (version 1.0beta1) isn't working for a rather simple case: a header element with background color and rounded corners, inside a DIV that also has a background color. Testing with Win 7 (IE 8) under VMWare, the behavior is identical for all combinations of IE7/8 browser mode and document mode: the background color of the styled H3 flashes briefly and then is removed. (If background color is replaced by a background image, it still doesn't display but there is no flash.) Quoting Gordon Brander: "The PIE elements are there, but they are coming in beneath the container with the background color. You can see this by removing the background color using the IE inspector tool. "

Test file is http://dawson.nu/PIEtest.html invokes PIEtest.css in the same directory; PIE.htc is there as well. The Apache server's config file contains "AddType text/x-component .htc".

Discussion on CSS3 PIE forum: http://css3pie.com/forum/viewtopic.php?f=3&t=18

When execute the behavior:url(PIE.htc) the "button" on IE8 is invisible, when I remove the behavior, the back button appear. I don't know what the problem is.

http://tcelestino.com.br/demo/csspie/index.html

Hi

Great work on this project! :)
Wanted to report a bug when using PIE with another IE(6) 'fix'.

PIE doens't play nice with Unit PNG Fix / http://labs.unitinteractive.com/unitpngfix.php .
Because IE6 can't handle transparant PNG files (24 bit), it displays an ugly gray-ish background where it should be transparant. Unit PNG Fix is a javascript to fix alpha transparancy in IE6 for PNG.

When implementing PIE into the same project, PIE works but stops Unit PNG Fix from working.
Both are simple to implement but are somehow conflicting.

Hope I've provided enough info, let me know if you need more.

on page standard request ex. clicking a link or useing the address bar they work fine but if i click refresh this happens:

http://i27.tinypic.com/33uafer.jpg

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.

Allow parsing and rendering of multiple box-shadow values, per the spec. See http://dev.w3.org/csswg/css3-background/#box-shadow

See http://dev.w3.org/csswg/css3-images/#radial-gradients

VML's "radial" gradients are actually square (they extend evenly from the edges of the shape's rectangle to the center). There is one exception: if the shape is a circle, then the gradient will also be a circle. Unfortunately our background shape is not circular.

The only possible thing I can think of is to create one or more circular shapes which contain the radial gradients, and then clip those shapes into the appropriate rounded rectangle. This could possibly be done with a compositor filter.

This comes from forum posting http://css3pie.com/forum/viewtopic.php?f=3&t=34

If an element is appended to the DOM, and then given an id/class which causes it to match a style rule containing the PIE.htc behavior, then the behavior will not be picked up. If the id/class is added before appending to the DOM, then it works fine. See the testcase in the forum post.

This may just be a weakness of how IE attaches behaviors on the fly, but we should look into it to make sure it's not a PIE bug or something that can be worked around.

At least in IE7 on XP, the styles applied to the top left nav links on http://arguments.callee.info/ don't get applied until I mouse over the element.

I thought it wasn't working at all at first, because I could use other elements on the page and the nav link still had no border radius, but then when I moved the mouse over the element it suddenly got a border radius and shadow.

If I refresh while the mouse is on top of the element, the radius/shadow do not appear until I completely mouse out of the element.

Spec reference: http://dev.w3.org/csswg/css3-background/#box-shadow

This problem is exemplified in tests/buttons.html

The problem is that for and elements, IE does some funky rendering of the element's contents. If the button is given a non-zero-width transparent border and a transparent background (as PIE gives it) then it will add some mysterious space in between the border area and the background area. This area is always drawn as solid white. The end result is that when PIE is applied to a button, that button will have an extra square solid white outline just within the PIE-rendered border, and the button will be larger than expected due to the extra space.

As one of the primary targets for CSS3 styles on many websites is styling buttons, this is a pretty big issue.

A possible solution would be to adopt the approach taken by e.g. dd_roundies which sets the target element to border-width:0 and increases the element's padding by the same amount as the original border widths. I've tried to avoid this approach because it has side-effects for things such as descendant positioning. It could also be tricky avoiding infinite loops due to triggering onresize events. It would definitely be selectively applied to only elements like button/input which need it.

When the border-width for an element is larger than the border-radius for one or more of its corners, then that corner will be rendered with some extra "bumps" sticking out from it. This is due to the fact that the calculated path ends up crossing itself in the corners, and the quadratic curve gets drawn concave rather than convex.

This is easily seen in some of the IE9 border-radius testcases, e.g. border-radius-sum-of-radii-001.htm

PIE sounds great, so I tried implementing it on a site I'm developing that uses some CSS3.

Using the code below for a input box results in...

IE6 - rounded corners, but the 1px border remains squared
IE8 in IE7 compatibility mode - it works!
IE8 - input box does not display at all

query { background-color: #f7f3ec; width: 245px; height: 24px; font-size: 14px; padding: 0; border: 1px solid #ae9e7b; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(./PIE.htc); }

Am i doing anything wrong? Keep up the good work!

When a border-image is applied, the expected behavior is that the normal border will be hidden. However PIE still attempts to render the border.

See forum post http://css3pie.com/forum/viewtopic.php?f=3&t=70

Might be related to http://github.com/lojjic/PIE/issues/#issue/7.

It would be great to have support for RGBA backgrounds.

RGBA background colors can be approximated in IE through the progid:DXImageTransform.Microsoft.gradient filter. If you give the startColorStr and endColorStr a hex value with 8 places, the first two will define opacity (a live demo can be seen at http://CSS3please.com).

When PIE is applied to a link/button/etc. and sets the element's background/border to transparent, then the background area does not respond to hovering reliably.

From RwwL in forum topic http://css3pie.com/forum/viewtopic.php?f=3&t=43 :
Testcase http://www.lifford.org/exp/css3pie/

From ArnoOnline in issue #26:
http://www.xirtcms.com/PIE_bug_1.jpg

The crash occurs when I implement css3pie via php wrapper onto body to create a linear gradient without defining -pie-background.

EDIT: I tried to replicate by calling it on something without any css3 properties and there was no crash. Might just be a problem with linear gradients.

EDIT 2: removed -moz and -webkit linear gradients and IE does not crash

CSS3 allows background-position values with 3 and 4 values; these allow specifying offsets from position keywords, e.g. 10 pixels to the left of the right edge. See spec reference http://www.w3.org/TR/css3-background/#the-background-position

PIE currently chokes when encountering 3 or 4 values, falling back to top left.

Test issue

text-shadow is oddly missing from the suite; it can produce some nice effects.

While RGBA colors are currently accepted when parsing linear-gradient values, they are always rendered with 100% opacity. This is because VML does not support per-stop opacity.

VML does allow a single 'opacity' attribute on the fill, however it appears that for linear gradients this is always applied so that the color at the start of the shape (not necessarily the first color-stop) is fully opaque and the color at the end of the shape has the specified opacity. The MSDN documents talk about an opacity2 attribute but it appears this only works in MSOffice.

To make per-stop opacity work will take some serious work, if it's even possible. The only thing I've been able to come up with is to draw each color-stop segment as a separate shape element; each shape would have the 'opacity' fill attribute and/or an alpha filter applied to achieve the correct opacity on each of its ends. These shapes would then be stacked next to each other to build the full shape. This could get very tricky in certain situations, such as when one of the stops extends through a rounded corner.

Other ideas are very welcome.

We could probably hit a good percentage of the use cases if we limited RGBA rendering to only gradients with 2 colors in a vertical or horizontal orientation where the stops are at the edges of the box.

'Submit' buttons do not appear to get styled properly, even with position: relative;.
Rounded borders are not shown, the background is not rendered properly, and there are no box shadows.

Tested with IE8.

Text input fields must be clicked on the border when 'border-radius' is used. Clicking inside the text field will not result in the text field becoming focused, and will remove focus from anything else.

Tested in IE8.

The following border-style values are not yet honored when redrawing the border for the purposes of rounding corners:

groove
ridge
inset
outset

All of these styles require shifting the border-color, so we will need to add an method for doing that to the Color class. This will also require a way to convert named colors to numeric values which can be shifted.

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.

This comes from forum posting http://css3pie.com/forum/viewtopic.php?f=3&t=23 submitted by "solidblack":

Hi there,

First of all: thanks for that great script!!!! It works (almost) perfect for me and saves me a lot of photoshopping/coding to get round borders and box shadows look like in serious browsers ;-)

I'm getting in trouble with this in Internet Explorer 8 (7):
I display/hide containers via jquery, If I do so twice (click on the tabs at the top), the borders and shadows suddenly disappear.
Have a look at this:
http://speth.bplaced.net/labs/css3_ie/

I've tried to fix it with a position:relative but without effect...

Can anyone pleeeeease get me out of this bad IE ( :x ) behaviour....Any hints?

Thanks in advance
solid

I don't have a minimal test case (yet), but here are the rough steps to reproduce:

1. Create nested ExtJS panels with column layout in the onready event of the document.
2. Ensure the layout is OK in IE8 and some other browser (Firefox, Chrome)
3. Apply some border-radius styles and PIE.htc behavior to the panels
4. Observe the page layout is reversed in IE8 while it is still OK in Firefox/Chrome

IE Developer Tools show that the DOM tree is reversed too.

As a workaround for IE6's lack of support for transparent borders, the target element's children are wrapped within a custom "ie6-mask" element in order to hide the element's native border. This works ok for the most part, but has some serious drawbacks:

1. The DOM is invasively modified. We're mucking with the parent-child relationship, which could cause other scripts relying on that relationship to fail.

2. Pulling elements out of the DOM and inserting them elsewhere has been known to cause problems in IE6, such as form elements losing their state.

3. Elements which do not and can not have children, such as form controls, images, etc. will fail.

A better solution must be found. It's possible that this could be done with a filter, like a chromakey or something fancy with compositor.

It's also possible to do this by reducing the border width to zero and increasing the padding by the same amount, however this causes other problems: it could cause other scripts which rely on the element dimensions (e.g. animations) to fail, and it would fire an onresize event which could cause an infinite loop.

Other ideas would be greatly appreciated.

The draft spec (http://dev.w3.org/csswg/css3-background/#box-shadow) says that outset box-shadow rendering should only display outside the element's border-box, and be transparent behind it. This allows the element to have a non-opaque background and see through to elements behind it.

Currently PIE displays the box-shadow as a solid shape behind the element, so if the element has a transparent background then the view will be blocked by the box-shadow color.

This probably requires a way to mask the box-shadow shape with another shape equal to the border-box. Perhaps with the Compositor filter.

It seems unlikely that this will be a common problem in real-life designs, as usually when you have a shadowed element it has an opaque background color.

When the behaviour is applied to an element whose parent has the attribute display:none, IE throws the above exception.

Currently the PIE.php wrapper script just serves up the PIE.htc file after setting the correct content-type header. This means that it doesn't send any headers to control caching by the browser, so IE will re-fetch the behavior needlessly.

Logic should be added to PIE.php to send cache expiry headers, and to honor if-modified-since based on the PIE.htc file's timestamp.

There are some good comments with code snippets buried in the discussion on http://php.net/manual/en/function.header.php

The text-shadow style is a commonly used feature in many CSS3 designs. As such we should look into adding some support for it.

It would be relatively simple to implement using the Shadow filter; however this would only be useful for single-pixel offsets with no blur, anything else would not appear accurate at all. But it would probably cover most real-life uses.

Another option would be combining other filters, e.g. the approach described at http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/ -- I can think of a few downsides to that:

1. It requires creating a "copy" of the element's text, basically all of its innerHTML, and positioning it on top. This is horrible for memory usage. Also it would be difficult or impossible to track changes to the contents of the element done via script, which we would have to do to keep the "copy" in sync.

2. These filters are applied to the entire deep contents of the element. This would make it impossible to e.g. apply text-shadow on the main element but remove or change the text-shadow on a descendant element; you can't remove or change a filter from the descendant element.

3. Applying these filters creates an implicit overflow:hidden on the element; any subelements which are positioned outside the bounds of the main element get chopped off. This is because filters apply processing on the rendered pixels within the element's viewport; anything outside that viewport is just ignored.

Suggestions for an approach which gets around these issues are more than welcome.

I have a div that has a border-radius which is moved to the left 38px by jquery. In IE the border sits in the original position but the div is moved to the left.

This seems to occur the first few times after IE is initially opened, and once it resolves itself it stays resolved until IE is closed down again. It is fixed when opening up developer tools, favourites, or anything that will redraw the page.

In IE6 there are a number of javascript errors. If you turn on verbose error reporting IE6 will prompt you with the errors. Anyways, adding a border radius in IE6 actually hides the element entirely for me in some cases. Because IE6 has terrible debugging tools I can't find more information. All that I can find is that IE6 is having issues with the javascript. The errors are 'unspecified error'. Very helpful right? I hate IE6 with a passion.

The following error happens when trying to build the files:

  Buildfile: build.xml

  build-uncompressed:

  build-compressed:
       [exec] Exception in thread "main" java.lang.UnsupportedClassVersionError: Bad version number in .class file
       [exec]   at java.lang.ClassLoader.defineClass1(Native Method)
       [exec]   at java.lang.ClassLoader.defineClass(ClassLoader.java:676)
       [exec]   at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:124)
       [exec]   at java.net.URLClassLoader.defineClass(URLClassLoader.java:260)
       [exec]   at java.net.URLClassLoader.access$100(URLClassLoader.java:56)
       [exec]   at java.net.URLClassLoader$1.run(URLClassLoader.java:195)
       [exec]   at java.security.AccessController.doPrivileged(Native Method)
       [exec]   at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
       [exec]   at java.lang.ClassLoader.loadClass(ClassLoader.java:317)
       [exec]   at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:280)
       [exec]   at java.lang.ClassLoader.loadClass(ClassLoader.java:252)
       [exec]   at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:375)
       [exec] Result: 1
     [delete] Deleting: /Users/vann/Downloads/PIE/build/script_uncompressed.js

  build:

  BUILD SUCCESSFUL
  Total time: 0 seconds

(This comes from @OpteronMx on Twitter.)

I only went to your site, in the homepage, I see the page without background. Looks like the code started to run and then halted

IE6, version provided by http://spoon.net/Browsers/ I'm on another computer and I've tried again, I get the same error.

It appears to happen only on that virtualized version. It works good on a virtual XP machine, but not on spoon version.

Spoon's version is 6.0.2800.1106.win7_gdr.100226-1909. Native version is: 6.0.2900.5512.xpsp_sp3_gdr.090206-1234

Currently if an element is set to translucent via filter:alpha(opacity=foo), PIE will not match that and instead display as fully opaque. We need to add logic to the RootRenderer to match the opacity of the foreground element.

From forum posting http://css3pie.com/forum/viewtopic.php?f=3&t=41 -- follow the directions there to reproduce. Problem site is http://herdcall.com/ which is using GWT so everything is created via JS.

At least IE7 and 8 are throwing an error on initialization of some elements. It appears propChanged() is being called first, perhaps before the element is contentready.

This error is likely related to some elements becoming misaligned.

Hello,
I'm having trouble when I float a container with rounded corners inside another container with rounded corners.

<html>
<head>
    <style type="text/css">
    div{background: none;}
    p, ul, ol, dl {padding: 0 10px; margin: 10px 0;}
    .line{overflow: hidden;zoom:1;}.unit{float: left;} .size1of2{width:50%;}.lastUnit {float:none; width: auto;}
    .mod {margin:10px 10px;overflow: hidden; zoom:1;}.mod .inner{zoom:1;overflow: hidden;}.inner{position:relative;}
    .mod,.mod .inner {border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;behavior:url(PIE.htc);}
    .solid {background-color: #cccccc;border: 1px solid #cccccc}
    .standard {background-color: #fbfbfb;border: 1px solid #cccccc}
    </style>
    <title>Containers</title>
</head>
<body>
    <div class="mod solid">
        <div class="inner">
            <div class="bd">
                <div class="mod standard">
                    <div class="inner">
                        <div class="bd">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt scelerisque leo. Nullam vel dui at felis hendrerit malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus quis, orci. Donec blandit, felis nec lacinia blandit, augue orci malesuada mauris, nec porta sem velit ut quam. Morbi metus urna, facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt. Nulla id odio. Aliquam lacinia bibendum justo.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Same as above but including a grid line</strong></p>
    <div class="mod solid">
        <div class="inner">
            <div class="bd">
                <div class="line">
                    <div class="unit size1of2">
                        <div class="mod standard">
                            <div class="inner">
                                <div class="bd">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt scelerisque leo. Nullam vel dui at felis hendrerit malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus quis, orci. Donec blandit, felis nec lacinia blandit, augue orci malesuada mauris, nec porta sem velit ut quam. Morbi metus urna, facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt. Nulla id odio. Aliquam lacinia bibendum justo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="unit size1of2 lastUnit">
                        <div class="mod standard">
                            <div class="inner">
                                <div class="bd">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt scelerisque leo. Nullam vel dui at felis hendrerit malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus quis, orci. Donec blandit, felis nec lacinia blandit, augue orci malesuada mauris, nec porta sem velit ut quam. Morbi metus urna, facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt. Nulla id odio. Aliquam lacinia bibendum justo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>