Howdy all, I've got another IE9-related build for you fine folks to hammer on!


This build expands on the initial IE9 linear-gradient support from the previous forum thread, adding the following:

- Support for border-image in IE9. This is much more complete than the border-image support for IE8 and below, due to the capabilities of SVG over VML. It properly supports stretch, repeat, and round for the side and center regions.
- Fixes for border-image in all IE versions: no longer requires setting border-style:solid to be sized correctly, and automatically hides the normal border if border-image is specified.
- Improved linear-gradient support in IE9. The previous build had the basics, but this takes care of many new details, notably that the rendered gradient honors all the related background properties (e.g. size, repeat, origin, clip). This means that you can start doing advanced things like Lea Verou's gradient pattern techniques (several of these are in this testcase doc)

Things that need to be tested in particular:

- Using border-image in conjunction with background styles, both the native background-* properties and with -pie-background.
- Verifying border-image and linear-gradient react properly to style changes, e.g. changing/adding/removing styles when hovering or similar.
- The advanced background size/repeat/origin/etc. support in linear-gradient. Try creating some gradient patterns like Lea Verou's!

IMPORTANT NOTE: Please make sure that your server is serving the PIE.htc using the correct content-type -- we learned in the earlier thread that IE9 is far more strict about that than other IE versions. Also, please reserve this thread for issues specific to the new IE9 border-image and linear-gradient support. General problems like "it's not doing anything" should be handled in separate troubleshooting threads. If you encounter a general problem please make sure it's a new issue in this build, i.e. test it using the beta4 release to compare.

My intention is that, barring any major issues you may find in this build, to treat this as a release candidate for a 1.0beta5 to be released ASAP.

This version works fine in IE9 and IE7 but breaks completely in IE8 (every PIE-enabled object disappears)

IE8
IE7/9

Thought I had tried the old version with the same CSS-code, but apparently I hadn't. The problem exists in beta4 as well, and seems to be some problem with nested elements with PIE-behavior. Level 1 and 2 of nesting does work, but not elements in level 3+

/Raaz

@Raaz: that's almost certainly the common z-index issue, no?

You were right, I didn't see that known issue before. Everything seems to work now. Thanks!

Hi,

Just thought I would let you know that I was experiencing an issue with background gradients not working in IE9, downloaded the beta above and now they work perfectly along with everything else.

Thanks for this, it's so handy and has saved me literally hours of hacking to get IE rendering our page as intended. Keep up the good work.

Andy

So far so good. Using this with a development build of my site, Protagonize, and it's working great. Seems slightly snappier than the previous development release, too. Might just be in my head, though.

Thanks for your hard work, Jason!

Cheers,
-nick

Have done some initial testing of gradients on my own site, and so far everything seems to be working correctly. Gradients applied to new HTML5 and regular form elements is working flawlessly. Will try and create some examples with border images and give further feedback.

Keep up the good work - you are making magic

Seems to be working for me in IE9 for linear gradients (and wasn't before with beta4). Please PM me if you want to see a live URL.

Jason:

I've tried all your suggestions, but I still can't get linear-gradient to work in IE9...

Here's the website that I've been trying it on: http://www.yachtathos.com

Hopefully I'm just doing something stupid...

Bill