Jump to content
GreenSock

robbue

IE 9 fallback for 3D transform

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi!

 

Any suggestion how I could add a fallback for 3D transforms in IE 9 (and other browsers):

 

 

TweenMax.to('#box', 0.5, {rotationY: 50, opacity: 0.2, transformOrigin:"0 50%"});
 

 

Link to comment
Share on other sites

here is one way to do it:

 

function() {

var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;
  if( supports3DTransforms ) {
  // 3D transform supported code here
  }
}
Link to comment
Share on other sites

That logic assumes there will be vendor prefixes, but that won't always be the case and you don't want your site/game/app to break when the browsers drop the prefix, so I'd do something more like this which is more verbose, but also more bulletproof (it should even work if there's no body yet on the document):

 

var supports3D = (function() {
    if (document.body && document.body.style.perspective !== undefined) {
        return true;
    }
    var _tempDiv = document.createElement("div"),
        style = _tempDiv.style,
        a = ["Webkit","Moz","O","Ms","ms"],
        i = a.length;
    if (_tempDiv.style.perspective !== undefined) {
        return true;
    }
    while (--i > -1) {
        if (style[a[i] + "Perspective"] !== undefined) {
            return true;
        }
    }
    return false;
}());
 
  • Like 1
Link to comment
Share on other sites

Hi,
 
I'm going to presume (and I'm maybe wrong) that your not familiar with Modernizr and YepNope. Those are two very cool libraries that could get the job done.
 
Modernizr will test the visitor's browser in order to check if it support a specific feature (in this case css3 3D transforms) and YepNope will take that test result and load a specific set of files (it could also load just a single file) such as js and css files that will be loaded for that type of browser, like this there's no checking browser version or anything like that, you're just looking for if the browser supports that feature.
 
In this case it would be like this:
 

<script src="scripts/modernizr.3D.test.js"></script>
<script src="scripts/TweenMax.min.js"></script>

<script>
Modernizr.load({
	test: Modernizr.csstransforms3d,
	yep : ['scripts/css3d.js', 'scripts/yepnope/css3D.css'],
	nope: ['scripts/No.css3d.js','scripts/yepnope/No.css3D.css']
});
</script>

So you just load the libraries (modernizr includes YepNope) and then you run the test. Once the test gets the results it takes the proper action.
 
If the browser supports 3D transforms will load the files in the yep key:value pair, if it doesn't it will load the files in the nope key:value pair.
 
The beauty of it it's that you can customize modernizr to include the test's you need, includes a series of classes in the html tag of the document and weights only 8.6 kb minified (you could go beyond it and gzip it and it would be even smaller) including YepNope.
 
The document will look like this for a browser that supports 3D transforms (firefox 18):

<html class=" js canvas no-touch csstransforms csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml" style="">
 

And like this if it doesnt (IE9):

<html class=" js canvas no-touch csstransforms no-csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml">

Also modernizr can chek for and incredible set of stuffs allowing to create more concise code for each situation, so instead creating humongous css and js files filled with hacks you create separated files for each situation allowing you to deal with painfull degradation for IE browsers.
 
In an aside note using YepNope independently allows you to create your own conditional logic to load your files both css and js.
 
Take a look at them:
http://modernizr.com/
http://yepnopejs.com/
 
Cheers,
Rodrigo.

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Hi Rodrigo,

 

Thanks for sharing your knowledge. I need more information about Modernizr.csstransforms3d as it is not supported by IE 9. Any help here would be really thankful and appreciable.

Link to comment
Share on other sites

Hi and welcome to the forums.
 
Mhhh it's a strange thing since both modernizr and YepNope work with IE6+ and as far as I know even with devices browsers.
 
Check if you're pointing to the right files and/or paths in the modernizr.load function. Remember that the function takes key:value pairs and that the yep and nope test can take arrays as their values. Also see if you downloaded the correct file from modernizr. In order to get the files you have to do the following:

 

Go to the download area in modernizr.com and select the tests you want to check


modernizr1.png

 

By default YepNope is selected but anyway is not a bad idea to check. Then click on generate:

 

modernizr2.png

 

And finally copy/paste the generated code into your text/html editor and save it. Then you do what's in my first post in this thread and it should work.

 

modernizr3.png

 

Anyway i uploaded a live example that i have in my pc that is working with IE7+ (i don't test IE6 anymore but it should work). It has all the code and styles all you have to do is to update to the current version of GSAP since it's working with 1.8.0

 

Also it would help if you could set a live example to take a better look.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

Thanks a lot you replied my query!

 

I followed your suggestions but unfortunately still it is not working in IE9. And I tried to run your test code as well. But no luck.

 

I got following message in IE9

 

"This Browser DOES NOT SUPPORT CSS 3D Transforms. BUMMER :_("

 

 

Anyways thanks!
 

Link to comment
Share on other sites

Hi,

 

That message means that IT IS working, if you check the code for the fallback array, that means the files loaded in the nope value, you'll see that the red background, the text and the animation of the pink element are in those files:

 

JS

var div1 = $("div#div1"),
    div2 = $("div#div2");

div1.append('<p>This Browser DOES NOT SUPPORT CSS 3D Transforms. BUMMER :_(</p>');

TweenMax.to(div2, 2, {left:200, repeat:-1, yoyo:true});

CSS

#div1{
	height:50px;
	width:500px;
	line-height:50px;
	background:#F00;
}
#div2{
	height:100px;
	width:100px;
	background:#f0f;
	position:relative;
	margin:50px;
}

And if you check the same page using firefox, chrome, safari or opera you'll see that the div element has a blue background, white letters and the pink element is making a 3D transform tween:

 

JS

var div1 = $("div#div1"),
    div2 = $("div#div2");

div1.append('<p>This Browser DOES SUPPORT CSS 3D Transforms. HURRAY </p>');

TweenMax.to(div2, 2, {rotationY:360, rotationX:45, repeat:-1, yoyo:true});

CSS

#div1{
	height:50px;
	width:500px;
	line-height:50px;
	background:#00F;
	border-radius:10px;
	color:#fff;
	padding:0 10px;
	font-weight:bold;
}
#div2{
	height:100px;
	width:100px;
	background:#f0f;
	position:relative;
	margin:50px;
}

Remember that since IE9- doesn't support CSS3 3D transforms, yepnope is going to load the files you indicate if the modernizr test fails, and if you don't indicate any files, is not going to load anything. So keep in mind to always include the nope indication and point to some files in there otherwise you'll end up with a page without css and js.

 

Hope this clarifies a little more.

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi,

 

Thanks again!

 

Your knowledge delivering is really good enough to make us clear and to have a better understanding about the topic. Well, I am a newbie for using yepnope.js. I would be grateful if you can suggest how should I indicate files for CSS3 3D Transforms to be run in your "Modernizr Fallback Test.zip" code. So I can look how it will work successfully in IE for me.

 

Hope to hear you again. Regards!

Link to comment
Share on other sites

Hi,

 

In order to indicate or point the files with YepNope using modernizr, just do what I said in my first post in this thread, also take as a guide the example attached:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Modernizr</title>

<script src="scripts/modernizr.test.js"></script>
<script src="scripts/jquery.latest.js"></script>
<script src="scripts/TweenMax.min.js"></script>

</head>

<body>
<div id="div1"></div>

<div id="div2"></div>

<script>
Modernizr.load({
	test: Modernizr.csstransforms3d,
	yep : ['scripts/css3dYep.js', 'styles/css3DYep.css'],
	nope: ['scripts/css3dNope.js','styles/css3DNope.css']
});
</script>
</body>
</html>

That's the entire code of the example, as you can see the div elements just have ID's, no css is loaded. The libraries loaded are JQuery (for selecting the elements), TweenMax and Modernizr (which contains YepNope). At the end the modernizr test is executed, it checks whether or not the user's browser supports CSS3 3D transforms. If the browser support 3D transforms (firefox, chrome, safari and opera) then the following files are loaded:

  • css3dYep.js (contains the code which appends the text to "div1" and animates "div2")
  • css3DYep.css (contains the style for "div1" - blue background and white letters - and for "div1" - pink background -).

If the browser doesn't support 3D transform (IE9-) the following files are loaded:

  • css3dNope.js (contains the code which appends the text to "div1" and animates "div2")
  • css3DNope.css (contains the style for "div1" - red background and black letters - and for "div1" - pink background -).

Finally it would be very helpful if you can set a live example or provide some code in order to see exactly what is it that you're trying to do and what is giving you problems, because, as you can see, the only thing I can do is just keep repeating myself.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Rodrigo, Excellent job at explaining how to handle this. I'm sure your demo files will come in handy for others.

Preeti,

I understand that you may be new to all this and we want to see you succeed with your projects. I think there may be some confusion about what Rodrigo's solution aims to fix as I get the sense that you are still expecting the CSS3 transforms to work in the older browsers, or perhaps there is just a language barrier getting in the way.

Just to be clear, when someone creates a "fallback" for a certain browser it is a way of providing alternate content / behavior for that browser. There isn't a way to simulate 3D rotation in ie9 so the solution Rodrigo proposed allows you to offer those users a different experience via a separate set of files.

Link to comment
Share on other sites

Thanks Carl,

 

Actually I never thought about asking if Preeti was looking for something that allowed seeing 3D transforms in IE9, should've started by that :P

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Thanks Guys,

 

for your efforts to make things clear to me. But Now I am confused. So, let me try some more practice and research for this issue.

 

Have a Good day!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×