Jump to content
Search Community

IE8 and Scale Not Working

Joe Hakooz 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

Hey Guys,

Ran into a problem where IE8 is not scaling an image. I've read several posts but nothing seems to work (element must be absolute, etc...)

 

Here is a super basic example...

http://duke.innovah.com/dukeregional/test.html

 

Here's the JS:

$(document).ready(function() {
	var bool = true;
	$('#campus').click(function(){
		var _scale = (bool) ? .7: 1;
		TweenLite.to($('#campus'), 1, {scale:_scale});
		bool = !bool;
	});
	
});

Works in all tested browsers except IE8. In IE8 the image pans a little but no scaling. 

 

I've also tried using scaleX and scaleY instead of scale. 

 

Note: I'm using IE10 in Browser Mode: IE8 and Document Mode: IE8 standards. When IE10 is in "compatibility" mode the issue also occurs. 

 

Any help or workaround is greatly appreciated!

 

Link to comment
Share on other sites

i just tested in IE8 (IE8 standards mode) and i see it just translating but not scaling... have you tried adding a transformOrigin property to your tween, and/or encapsulating your css properties with the css: {} property:

$(document).ready(function() {
	var bool = true;
	$('#campus').click(function(){
		var _scale = (bool) ? .7: 1;
		TweenLite.to($('#campus'), 1, {transformOrigin:"center center", scale:_scale});
		bool = !bool;
	});
	
});

// or using the css: {} property ???
$(document).ready(function() {
	var bool = true;
	$('#campus').click(function(){
		var _scale = (bool) ? .7: 1;
		TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}});
		bool = !bool;
	});
	
});
Link to comment
Share on other sites

what about wrappng the image in a div.

 

give the div css (position:relative;)

 

and then give the image css (position:absolute);

 

check out these examples (ie8 may be a little jittery):

 

See the Pen udoKG by jonathan (@jonathan) on CodePen

 

See the Pen boclF by jonathan (@jonathan) on CodePen

 

code pen might not work in ie8 (ie8 standards mode)

Link to comment
Share on other sites

Conclusion... Sort of... And thanks again for your help.

 

Turns out the issue is document mode (See attached screenshot). 

The problem is when you set "Document Mode" to "IE8 Standards (page default)". 

If you switch that setting to "Standards" it works just fine. Even my simplified test page.

 

So the million dollar question is... what "Document Mode" is the real IE8 typically running in?

 

post-11741-0-05995100-1377030961_thumb.jpg

Link to comment
Share on other sites

I presume your using IE10 .. the real IE8 standalone.. the one that is used in Windows XP is

Browser Mode: IE8
Document Mode: IE8 standards

IE10 "Standards" mode in IE10 is a new rendering mode in IE10..

I also have a Windows XP box with IE8 standalone, and that is same as the IE10 rendering in: IE8 (IE8 standards mode)...

 

i hope that helps

Link to comment
Share on other sites

Correct, I'm using IE10 developer tools to simulate IE8.

 

This is bad news. GSAP scale does not work in IE8 Standards and you're saying IE8 standards is what the "real" IE8 uses. 

 

Would you be willing to test these links on your Win XP IE8? Pretty please???

 

See the Pen udoKG by jonathan (@jonathan) on CodePen

 (CodePen doesn't work at all for me in IE8 Standards)

http://duke.innovah.com/dukeregional/test.html (My simple test page)

 

Can't thank you enough for your help Jonathan!

Joe

Link to comment
Share on other sites

looks like you removed the wrapping div with css (position:relative;) and the css on the image (position absolute;) .. try adding the wrapped div and the position css back

 

ie8 (ie8 standards).. would not even animate without the window load event handler...

 

also try to wrap your TweenMax call with a window load event so you make sure you run the animation when the image is loaded

// wait until the dom is ready
$(document).ready(function() {

   // wait until window is loaded and all assets like images, frames, urls are loaded
   $(window).load(function(){

       var bool = true;
       $('#campus').click(function(){
              var _scale = (bool) ? .7: 1;
              TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}});
              bool = !bool;
       });

   }); // end window load

}); // end dom ready

i tested this on windows XP, ie8 (ie8 standards mode) .. and on windows 7, ie8 (ie8 standards mode) .. and it animated.. but it just translated the image from right to left top, and didnt scale the image..

 

if all your doing is scaling an image... as a fallback for only ie8, you can you can just animate the css width property or animate the width attribute of the image in IE8 only..

// wait until the dom is ready
$(document).ready(function() {

   // wait until window is loaded and all assets like images, frames, urls are loaded
   $(window).load(function(){

       var bool = true;
       $('#campus').click(function(){
              // if is3D is true than its not ie8
              var is3d = hasTransform3D(); 
              if(is3d){
                   var _scale = (bool) ? .7: 1;
                   TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}});
              } else {
                   var _newWidth = (bool) ? 200 : 300;
                   TweenLite.to($('#campus'), 1, {width:_newWidth});
                   // TweenLite.to($('#campus'), 1, {css:{width:_newWidth}});
              }
              bool = !bool;
       });

   }); // end window load


    ////////////////////////////////////////////////
    // Check for Transform3D support
    function hasTransform3D() {
                
                    var div = document.createElement('div'),                    
                        transforms = {
                                'Transform':'transform', // default
                                'WebkitTransform':'-webkit-transform', // chrome and safari
                                'MozTransform':'-moz-transform', // firefox
                                'OTransform':'-o-transform', // opera
                                'MsTransform':'-ms-transform', // ie
                                'msTransform':'-ms-transform', // ie10                            
                                'transform':'transform', // ie10 other build
                        },
                        has3D;
                    document.body.insertBefore(div, null);            
                    for(var t in transforms) {
                                if(div.style[t] !== undefined) {
                                    div.style[t] = "translate3d(1px,1px,1px)";
                                    has3D = window.getComputedStyle(div).getPropertyValue(transforms[t]);
                                }
                    }            
                    document.body.removeChild(div);        
                    var output = (has3D !== undefined && has3D.length > 0 && has3D !== "none");
                    //if(window.console) console.log(output);
                    return output;
    }

}); // end dom ready

basically the function above hasTransform3D() .. checks if translate3d is supported in the browser. IE8 does not support translate3d so the it returns false for IE8. So basically for a non ie8 (ie8 standards) browser, it will use scale, and in ie8 (ie8 standards) browser it will animate the css width property or the width attribute of the image.

 

Other than that im not sure why GSAP wont scale the image in IE8 (IE8 standards)

 

Pretty soon we wont have to worry about IE8 since it is only at 6% market share and dropping quickly. The only users who are forced to use IE8, are users on Windows XP, who wont upgrade. But even then, they can download Firefox or Chrome if they know they can. Microsoft stops support for XP on April 8, 2014. So hopefully by the end of this year, the IE8 market share will be 3% or smaller, and will hopefully fall even faster. And then no more IE8.. and then we can just hope for IE9 to fall to its death as well! :)

 

i hope this helps!

Link to comment
Share on other sites

hey Carl, thanks..

 

I tested on windows XP Real IE8 (ie8 standards) and all it did was translate the image, not scale for the following link: http://duke.innovah.com/dukeregional/test.html

 

i couldnt check the code pen in XP Real IE8 (IE8 standards) .. i will have to check Rodrigo's virtualbox suggestion for code pen examples in real IE8.. since jsbin and jsfiddle also dont allow previews with IE8 (IE standards)

 

I made the code pen (

See the Pen boclF by jonathan (@jonathan) on CodePen

) into actual files so if you want to test outside of code pen, with some modifications

 

I attached a file that i tested on windows XP, IE8 (IE8 standards) .. and it just translates, and doesnt scale.  ... Not sure why.. thanks for the help!!

 

Also Rodrigo.. are you seeing it scale in the Oracle VirtualBox ie8 ???

codepen_scale_ie8_ie8_standards.zip

Link to comment
Share on other sites

thanks Carl..  i mean the image moves from right botttom to left  top..

 

when viewing in windows 7,  IE8 (standards) it scales fine..

 

But in windows 7 or XP, IE8 (IE8 standards mode) the image moves and does not scale

 

But i couldnt get the code pen to work in ie8 (ie8 standards) on Windows XP or in rendering mode Windows 7, ie8 (ie8 standards).. so i had to test locally on both XP and win7 with attached file above..

 

code pen wont even work in IE if:

 

Browser Mode: IE8

Document Mode: Internet Explorer 8 standards

 

to see what im seeing in windows 7, you have to make sure:

 

Browser Mode: IE8

Document Mode: Internet Explorer 8 standards  not "Standards"

 

"Standards" is a new mode in IE10

 

to see what im seeing in XP, the IE8 default is:

 

Browser Mode: IE8

Document Mode: Internet Explorer 8 standards

 

i am seeing this (and have tested) on 2 Windows XP computers (real ie8 standalone browsers), and 3 Window 7 computers (IE10 with rendering modes) , that have IE set to:

 

Browser Mode: IE8

Document Mode: Internet Explorer 8 standards

 

and then you will see what i am seeing.. thank you for your patience! :)

Link to comment
Share on other sites

thats so weird Carl..

 

AWESOME, how you were able to share that video file. Helped alot..

 

I will compare your build with mine. Looks like your using VMware, Windows 7 64 bit? Is that VMware running on a MAC?

 

I tested on a Windows 7 laptop, Windows XP laptop, and on a Windows XP desktop and both have the same result...

 

My XP IE8 version: 8.0.6001.18702

 

and im on a actual XP computer... Windows XP 32 bit..

 

looks like it is behaving different on this version of IE8 and XP 32 bit... I have latest IE for XP.

 

I attached a screenshot showing how codepen renders the page in windows XP.  everything is collapsed .. with my version of IE8 (IE8 standards). .. you can see how code pen wont even work on an actual Windows XP machine using render mode of IE8 (IE8 standards).

 

Joe Hakooz was seeing the same thing on his Windows 7 computer, as stated above,

 

...as was I, when viewing the code pen on my Windows 7 (64 bit) laptop in IE8 (IE8 Standards) ...

 

both windows XP and windows 7 (actual windows operating systems, not vmware) just move the image and dont scale the image.. very weird.. looks like Internet Explorer IE8 (IE8 standards) behaves differently on actual Windows machines versus the VMware environment..

 

please check out the attached file (image)

 

and thank you so much for your time and help with this!! :)

post-15956-0-04020600-1377053246_thumb.jpg

Link to comment
Share on other sites

Correct Jonathan. I see the same thing at CodePen but I'm using IE10 with Browser Mode IE8 and IE8 Standards Document Mode. 

 

Tried to install VirtualBox but it hung for an hour until I forced restart :-(

Next tried to use VirtualPC but the VPC could not connect to the Internet?!?

Then screamed a bunch and watched Breaking Bad... 

 

I look forward to any more conversation about this, but one thing is for sure... IE8 is a serious pain in the arse!

 

PS... In case anyone is curious, here is the real version I'm working on. The "Parking" tab triggers the zoom/scale. http://duke.innovah.com/dukeregional/imap.html

 

Thanks all!

Link to comment
Share on other sites

Yeah looks great Joe,,

 

Carl, here is another screenshot attached of the scale effect when in XP and Windows 7 - ie8 (ie8 standards) .. you'll notice how the pic shows that the image is moved to the left top instead from scaled from center.. inside the blue border

 

All other iE rendering modes it scales fine..

 

i also attached the zip file that is being used since codepen cant be viewed on a windows 7 or xp computer in ie8 (ie8 standards mode)

 

Its just weird how the IE8 (iE8 standards) works better on in a virtual environment, instead of an actual computer with windows installed..

 

Also i noticed in this weird IE8 (ie8 standards mode), that clearProps doesn't clear properties.. i describe that in another post.. http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476

codepen_scale_ie8_ie8_standards.zip

post-15956-0-57793700-1377094365_thumb.jpg

  • Like 1
Link to comment
Share on other sites

Hmm not really sure on this one, as just like Carl, that is working as expected in actual IE8 for me. I can only reproduce the 'no scale' problem when using later IE versions and changing the document mode.

I noticed you're just opening index.html using file:// protocol; do you see the same results when accessing that content on an HTTP server? File protocol isn't always the most reliable way to test dynamic pages, so I wonder if that is having any effect here?

By the way, codepen does work on IE8, you just need to change to full view (no editing though unfortunately):

See the Pen rwFva by jonathan (@jonathan) on CodePen

(full editor)

See the Pen rwFva by jonathan (@jonathan) on CodePen

(view mode - compatible with IE8)

Link to comment
Share on other sites

thanks Jamie.. Not sure why actual IE8 (IE8 standards behaves differently) .. i have tried it on 2 XP (32 bit) computer, and 3 windows 7 (64 bit) computers at work with IE8 standalone in IE8 (IE8 standards)

 

 

 

thanks for the tip on codepen working when in full view mode.. Its weird because i see code pen working and not collapsed like in my screenshot in previous replies.. but now i get this error in the console.. and this is when using actual IE8 (IE8 standards) ..

 

SCRIPT438: Object doesn't support property or method 'totalDuration'
TweenMax.min.js, line 14 character 1568

 

i attached a screenshot of the error thrown in codepen
 

Joe Hakooz in above replies is seeing the same issue.. very weird..

 

this is weird to, because in a previous post i was having an issue with clearProps not clearing properties in actual IE8 (IE8 standards) ,, listed here: http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476

 

Also what operating system and type of computer, are you viewing your actual IE8 (IE8 standards) on?? a PC, Mac, or Linux?

 

Is it an actual Windows PC or on a Virtual environment (VMware) ??

 

thanks for the help and time :)

post-15956-0-40468900-1377173933_thumb.jpg

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...