Forums
View unanswered posts | View active topics It is currently Mon Sep 01, 2014 10:20 pm



This topic is locked, you cannot edit posts or make further replies.  [ 59 posts ]  Go to page 1, 2, 3, 4, 5, 6  Next
 Testing build with IE9 linear-gradient support 
Author Message

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Testing build with IE9 linear-gradient support
Hi all,

For those of you who have been frustrated by PIE's lack of support for linear-gradient in IE9, you'll be pleased to know that I've finally had time to add support!

I am attaching a development build below with the new IE9 gradient support included. It passes all my local tests, but it's likely there are bugs I have not triggered, so I would greatly appreciate you awesome members of the user community giving it a try and reporting any issues you find here.
Attachment:
PIE.zip [97.69 KiB]
Downloaded 2711 times

NOTE: new build attached later on in this thread.

Some things to note:

- The CSS syntax for using linear-gradient has not changed at all, it has to be in the same -pie-background property as with IE6-8.
- Since it uses SVG instead of VML, this IE9 implementation fully supports rgba colors with opacity for each color stop. If you can exercise that in your testing that would be great.
- There is still just a single PIE.htc file which includes both the IE6-8 and the IE9 code. This means that IE6-8 will download about 3kb of extra IE9-specific code, and IE9 will have to download all of the IE6-8 code despite only using a small fraction of it. I'm hoping to split this out into separate files in the near future to minimize download size.

Thanks everyone, please leave feedback in this thread. Reports of success are appreciated as well as bug reports.

UPDATE: Thanks for the testing everyone! I've started a new thread with a new dev build including enhanced gradient support as well as border-image support for IE9. Testing of that new build is appreciated, please see the notes in that thread. This thread is now locked.


Mon May 16, 2011 10:06 am
Profile

Joined: Mon May 16, 2011 10:47 am
Posts: 2
Post Re: Testing build with IE9 linear-gradient support
Thanks for the update. However, I was not able to get it to work in IE9. It does work in IE9 compatibility mode though - even with document mode "IE9 standard". I'll be happy to provide more information if you tell me what you need to know :)


Mon May 16, 2011 10:52 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Testing build with IE9 linear-gradient support
@bean10: That's very strange. It works perfectly fine for me in IE9 browser mode, with all document modes.

Do you happen to have a live version of your test page somewhere that I can look at?

My IE9 is version 9.0.8112.16421, update version RTM KB982861, on Vista.


Mon May 16, 2011 6:40 pm
Profile

Joined: Tue May 17, 2011 4:06 am
Posts: 2
Post Re: Testing build with IE9 linear-gradient support
I thought it's worth pointing out that I just discovered IE9 can natively use gradients, though it's not quite as simple as it is for other browsers (and not as simple to code as a version of PIE that will do it). See the attachment for a basic example.

Basically it uses the background-image property along with a base64 encoded SVG image. I found this on the IE testdrive site - http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html and am surprised I've seen virtually no mention of this anywhere else on the web. I've combined it with some styles taken from the CSS Gradient Creator on Colorzilla (http://www.colorzilla.com/gradient-editor/) to create a set of styles that will work on any popular browser (IE6+, FF3.6+, Chrome, Safari4+, Opera11.10+).

Anyone who wants to create their own gradients for IE9 can use the SVG Gradient page on the IE testdrive site for basic gradients, or you can edit the SVG manually and run it through a base64 encoder such as this one: http://www.webtoolkit.info/demo/javascript-base64.

The upshot of this method is that it doesn't require javascript to run, should be quicker than a javascript solution, and it will automatically work with all CSS selectors. I've also done a few checks and it works fine with border-radius, inset box-shadows, etc.

I don't mean to invalidate any of your work Jason - PIE has been a godsend to me over the last 9 months, and I guess some people may prefer to use PIE rather than having to create an SVG image and run it through a base64 encoder, but at least this way people will have a choice as to how they implement gradients.

As a result of this though, one thing I'd ideally like to see PIE do in the future is allow different functionality to be enabled/disabled in different versions of IE. For example, if at some point in the furure PIE supports text-shadow, I'd like to enable full functionality in IE6-8, but enable text-shadow only in IE9.


Attachments:
index.zip [14.88 KiB]
Downloaded 1158 times
Tue May 17, 2011 4:46 am
Profile

Joined: Mon May 16, 2011 10:47 am
Posts: 2
Post Re: Testing build with IE9 linear-gradient support
Ok, shame on me. It was the .htc-file not being served with the correct content type :oops:

I'm sorry, Jason, your changes work like a charm.


Last edited by bean10 on Tue May 17, 2011 8:51 am, edited 1 time in total.



Tue May 17, 2011 8:29 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Testing build with IE9 linear-gradient support
@booz: Thanks for the info. In fact, this is *exactly* what PIE does behind the scenes in IE9. :)

Creating hardcoded base64 SVG is certainly workable in most situations, and has been the recommended approach until now since PIE hasn't had support. But many developers have found that approach cumbersome and have requested automatic support in PIE.

You should also note that the static SVG approach is not quite a 100% replacement for all aspects of CSS3 linear-gradient; for instance it is not able to keep your gradient at a fixed angle (say, 45deg), or have color stops remain at fixed non-percentage lengths, when the element is resized. Because PIE is javascript that can react to resizing, it handles these additional details accurately.

Regarding performance, you are of course correct that a static base64 SVG will be faster than having PIE generate it on the fly, and some users will prefer that. That can equally be said for any of the features PIE implements; it will always be faster to do rounded corners with static images than to have PIE do it, for instance. As always it's a tradeoff between rendering speed and development speed, and every developer has to make that choice.

(Note, however, that PIE's new IE9 gradient implementation is much faster than PIE in IE6-8 -- in my testing it handles about 250 elements a second on modest hardware, so the speed difference will be negligible for the majority of users. Download time is still a consideration though.)

I'll consider adding a way to disable certain features per browser version. PIE already disables all features except the new linear-gradient code in IE9, so it's doing most of that on its own, but I can see how it would be nice to have finer-grained control over that.

Thanks. BTW you didn't say if you had tested the new support or not...?


Tue May 17, 2011 8:43 am
Profile

Joined: Tue May 17, 2011 1:35 pm
Posts: 27
Post Re: Testing build with IE9 linear-gradient support
I, too, cannot get the gradient to work in IE 9 on my site. I am already using PIE for 'rounded corners' on the tabs of the home page (for IE7 & 8). When I dropped in the following lines to the css for the content :

-pie-background: linear-gradient(#FFFAE5, #F7EA1D);
behavior: url(/js/PIE.htc);

nothing happens in IE9. As I indicated above, I'm already using PIE for rounding the corners of IE7 & 8. My web site is at www.farmclubrc.com . Do you see anything obvious that I have missed. Any help would be appreciated. (btw: I'm not actually going to use those gradient colors on the site. I just wanted to insure that I could see a difference while testing).

rsutton


Tue May 17, 2011 2:06 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Testing build with IE9 linear-gradient support
@rsutton: It appears that you, too, are serving PIE.htc with an incorrect content-type of text/plain. Can you please fix that and see if that helps with IE9?

It's possible that IE9 is more strict about the content-type -- if so I will definitely make an obvious note of this in the release notes.

http://css3pie.com/documentation/known- ... ntent-type


Tue May 17, 2011 8:56 pm
Profile

Joined: Tue May 17, 2011 1:35 pm
Posts: 27
Post Re: Testing build with IE9 linear-gradient support
@jason: you are so right! I had updated my apache htaccess file when I first started using PIE. However, I forgot to upload it to the server. I guess IE 7 & 8 aren't too picky about it because everything seemed to work. IE9 wants that htc file served properly, however.

Thanks again for the fine work...

rsutton


Wed May 18, 2011 10:41 am
Profile

Joined: Wed Feb 09, 2011 1:15 pm
Posts: 6
Post Re: Testing build with IE9 linear-gradient support
@Jason, works perfect! I love it! So much more intuitive than making my own .svg files, and FAR more intuitive than base64. Thank you so much.


Wed May 18, 2011 12:31 pm
Profile
Display posts from previous:  Sort by  
This topic is locked, you cannot edit posts or make further replies.   [ 59 posts ]  Go to page 1, 2, 3, 4, 5, 6  Next

Who is online

Users browsing this forum: No registered users and 2 guests


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:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.