CSS3 some features rendering in IE

[dalisoft]

Hi all!

I'm in last time interested TweenMax for performance.

I'm using TweenLite/Max from 2013 June, but 2013 TweenLite/Max are slowly.

The new 2014 August TweenLite/Max performance high, smooth 50+ fps (if H/W accelaration is disabled) and very-smooth without breaking frames 60 FPS and 60 Hz rendering (if H/W acc. enabled).

 

In latest GSAP (TweenLite/Max and etc) have some issues in IE!

 

1. Dx and Dy in relative position cutting when transformating.

2. CSS3 rendering - borderRadius, boxShadow, backgroundGradient, textShadow doesn't work

3. CSS3 Transform - rotateX, rotateY, translateZ, scaleZ doesn't work.

 

Have issue fixes!

1. Set position to absolute.

2. borderRadius, boxShadow and backgroundGradient pollyfil have (i'm now upload to GoogleDrive, see https://googledrive.com/host/0B7DKrzLvYDoOV1ZzZ3ZRMTdwbE0) in IE!

3. CSSMatrix uses advanced calculating and making 3D in IE (see https://github.com/arian/CSSMatrix )

 

Thanks!

[GreenSock]

I had a hard time understanding some of your post - were you offering some polyfills for IE8 that folks can optionally use? 

 

We mention #1 in our docs, and I'm not quite sure what #3 is referring to (the link is dead, 404). 

[dalisoft]

I had a hard time understanding some of your post - were you offering some polyfills for IE8 that folks can optionally use? 

 

We mention #1 in our docs, and I'm not quite sure what #3 is referring to (the link is dead, 404). 

Hi Jack!

Sorry, for my bad english and error link.

I fixed Google Drive demo (#2) and CSSMatrix link (#3)

 

CSSMatrix, https://github.com/arian/CSSMatrix uses 3D Matrix calculating, but perspective can't work (3D vieweing)

 

Check https://googledrive.com/host/0B7DKrzLvYDoOV1ZzZ3ZRMTdwbE0 link in IE for testing works.

 

IMPORTANT: This pollyfil not only IE8, back to IE5.5 and other browsers.

 

Thanks!

[Jonathan]

I am having trouble understanding your post as well ...

 

What version of IE?

 

What OS and OS version are you seeing this on?

 

Is this real IE standalone or an emulated rendering through one of Microsoft Document Modes?

 

Do have an example code demo so we can see the behavior you describe?

 

Have you read the GSAP Docs: http://greensock.com/docs/#/HTML5/ ??

 

[dalisoft]

I am having trouble understanding your post as well ...

 

What version of IE?

 

What OS and OS version are you seeing this on?

 

Is this real IE standalone or an emulated rendering through one of Microsoft Document Modes?

 

Do have an example code demo so we can see the behavior you describe?

 

Have you read the GSAP Docs: http://greensock.com/docs/#/HTML5/ ??

 

Hi Jonathan,

 

I'm maked demo and have link in top (GoogleDrive) - CSS3 some features. Tested in IE8 standalone Windows 7.

 

CSSMatrix javascript ( This is a CSSMatrix class as defined by the w3c CSS3 3d Transforms specification )

 

I'm tested CSSMatrix, but deleted. In making now demo for your!

 

Yes, i readed Docs!

 

Sorry for my bad english

[GreenSock]

Are you saying you have found a way to do 3D transforms in IE8? I'm pretty sure that's impossible, and the link you provided is only for 2D transforms (although I may have misunderstood). GSAP already does 2D transforms in IE8, and we use our own matrix math that's faster than that link you provided. I'm struggling to determine what you are trying to do here regarding 3D transforms. Could you explain in a little more detail? 

[dalisoft]

Are you saying you have found a way to do 3D transforms in IE8? I'm pretty sure that's impossible, and the link you provided is only for 2D transforms (although I may have misunderstood). GSAP already does 2D transforms in IE8, and we use our own matrix math that's faster than that link you provided. I'm struggling to determine what you are trying to do here regarding 3D transforms. Could you explain in a little more detail? 

Thanks for answer!

 

A My some CSS3 rendering example worked?

If worked and liked to you i'm make plug-in for GSAP.

[GreenSock]

Yes, it does seem like that 42kb extra PIE file and the different syntax you used allows certain CSS3 features to work in IE8, like gradients, border-radius, and box-shadow. You're welcome to build a plugin, sure, but I don't think there's much demand for IE8-specific things like this since that browser is basically dead (Microsoft itself dropped support for it months ago). I doubt that many developers will want to load an extra 42k file and potentially write different prefixes just to make those CSS3 features work in IE8, but I could be wrong. 

 

Like the jQuery development team, we're not putting much effort into IE8 anymore. It is pretty cool that you found that solution (I actually was aware of PIE when I originally built CSSPlugin but decided it was too cumbersome and bulky to integrate those features into GSAP).

 

Thanks for sharing. I'm definitely interested to see if you found some way to make 3D transforms work in IE8 in a somewhat performant way. 

[dalisoft]

Thanks!

[dalisoft]

Hi, Jack.
I am have 3D like transformation way to make 3D like transform. Have rotateX, rotateY, rotateZ, Perspective, matrix(a, b, c, d, e, f). But requires more Kb and code. You're have maximal knowledge about codes. i'm have only less codes and now making demo. About 2 hour i upload it after -2 hour. If i upload to you and liked to you, im moderator of greensock?

Sorry , for my bad english

[GreenSock]

I wish I understood you better. I'm just not quite sure what you're saying.

[dalisoft]

I wish I understood you better. I'm just not quite sure what you're saying.

For your very better news and evolution for TweenMax:

http://googledrive.com/host/0B7DKrzLvYDoOUXIwVjk5MjFVenM - just see source and licensing

 

See in IE5+ for IE and modern non-prefix modern browsers

[GreenSock]

That is pretty cool, but it doesn't seem to match how things render in 3D in modern browsers. 

 

I noticed you're asking for donations and are restricting the use of the code. Feel free to create a plugin for GSAP that you offer on your own site. I don't even mind if you link to it here in our forums. Maybe you could make some money off of those donations, but unfortunately it seems to me that most developers aren't willing to devote many resources to supporting such an old, uncommon browser. But there very well may be a market for this. I wish you the best of luck. 

[dalisoft]

That is pretty cool, but it doesn't seem to match how things render in 3D in modern browsers. 

 

I noticed you're asking for donations and are restricting the use of the code. Feel free to create a plugin for GSAP that you offer on your own site. I don't even mind if you link to it here in our forums. Maybe you could make some money off of those donations, but unfortunately it seems to me that most developers aren't willing to devote many resources to supporting such an old, uncommon browser. But there very well may be a market for this. I wish you the best of luck. 

This demo works on non-prefix (node.style.transition, node.style.transform) (*** now fixed, works prefix-based browsers ***) 3D supported modern browsers.

AND THIS NOT PREMIUM FOR GSAP, its premuim for others users see in demo and copy restricted.

This rule not for your, free for your and GSAP administators!!!

After i'm created a plug-in it's free and licensed under GSAP licenses!!!

But i'm now don't know how to create plug-in. I'm created this demo for your creating a 3D for IE.

Current demo in: borderRadius and 3D transformation (rotationX, rotationY, rotationZ) and i now finding way to add scaleZ, translateZ variant's.

I NOW FIXED 3D browsers rendering. for non-IE 2D browsers it's rendering only rotateZ transformation

 

26/08/2013-12:19:02 (GMT +5, Tashkent Time, UZT) - I'm added for mobile (smartphone), tablet, desktop, mac modern browsers and Windows XP 2003 IE5 supported!

Enjoy use and create plug-in for free. I'm restrict sell, copy for guest users.

 

I'm very thankful!

 

Thanks!

Edited August 26, 2014 by dalisoft

[dalisoft]

Hi, Jack (GreenSock)!

 

I'm maked 3D for (IE5, IE6, IE7, IE8, IE9*)!

 

Name: IE3D.js, jQuery plug-in available.

 

Lightweight, Simple, Easy 3D animation demo with IE3D - http://bit.ly/1vpD0M2 (See rules, in JS source and see license)

 

Compatibility: IE5.5+, Chrome 19+ (requires 3D), FF14+ (required 3D), Opera 15+ (Webkit, 3D version)...

 

* - in IE9 standalone version won't works, for works it, required emulating.