Jump to content
Search Community

Rotation in real IE8 ?

NicolasJ test
Moderator Tag

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

Hello,

 

I do not have any real internet explorer 8, just the compatibility mode of IE10 on a Windows 7.

I saw on the forum that it could have some issues with the compatibility mode.

Thus, I wonder if someone could confirm or not that this example below works on a real IE8 (and IE7 if possible)

 

The problem I have is that the rotation does not work. There is strange behavior.

<!DOCTYPE html><html><head>
    <meta charset="utf-8"><meta name="viewport" content="width=1000" />
    <title>ROTATION</title>
    <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}#box {position: absolute;}</style>
</head>
<body>
    <button id="rotate">rotate</button>
    <div  id="box"><img src="http://www.snorkl.tv/images/crab.png"></div>
    <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script>
    <script>
        $(function() {
            $("#rotate").on("click", function() {
                TweenLite.to("#box", 0.95, {
                    directionalRotation:'+=90_short',
                    ease:Power3.easeOut
                });
            });
        });
    </script>
</body>
</html>

Best

 

Link to comment
Share on other sites

when using IE10 .. the default is IE10 (standards).

when viewing or selecting the different document modes don't choose any of the compatibility modes.

 

The compatibility modes will not render correctly.

If you are testing those document modes, make sure you choose the standards mode. So you can get more accurate rendering.

When I test Windows 7.. rendering in IE10 in the document mode IE8 (IE8 standards mode) .. it renders the same as Windows XP, real IE8 .. IE8 standards.

I tested on both windows 7 and xp.. and it works...

so im guessing you are viewing in IE10 (IE8 - IE8 compatibility mode) .. instead of (IE8 - IE8 standards mode)..

compatibility mode will make websites look awful and not function right.. make sure in your IE settings under the tools menu that compatibility websites is unchecked for internet and intranet sites..

also when choosing rendering modes, never select any compatibility mode, always test for standards mode so you know, you get an accurate rendering.

compatibility modes in IE are supposed to make older sites, and badly written non standards html look good.. but actually it causes issues and make sites look and function bad.. never use any compatibility mode.

I hope that helps :)

  • Like 4
Link to comment
Share on other sites

Thanks Jonathan, compatibility mode really is atrocious...

 

Just to be clear though, using IE Developer Tools to change the document mode (to any of the 'standards' modes) only gives a close, but not identical representation of older versions of IE (this mostly applies when you are talking about complex things like transforms and filters - more standard DOM stuff usually works well enough).

 

For the most accurate testing of what real world users will experience (not many of your users will be loading your site in a newer IE then downgrading the document mode...), you really do need to use the actual version of IE you want to test. It also can't hurt to test on both XP (for IE8 and lower) and either Vista for IE7+ (yuk), or Win7 for IE8+.

  • Like 4
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.
×
×
  • Create New...