Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Joe Hakooz

IE8 and Scale Not Working

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 post
Share on other sites

if you look at your source code.. you have a ending div tag </div> with out the start div tag..

 

try correcting that, and see if it works..

 

ie8 (ie8 standards mode) throws an error in the console about the Unmatched end tag, line 23.

Link to post
Share on other sites

Accidentally left that in when creating the test page.

 

Thanks for catching it but unfortunately IE8 still doesn't work...

Link to post
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 post
Share on other sites

Good suggestions Jonathan, but neither did the trick. Your second example is currently on my test page.

 

Any other ideas?

Link to post
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 post
Share on other sites

The extra div didn't help but you've proven that it can work in IE8. There are a few things you're doing differently so I'm going to play around with that and post my results here when done...

 

Thanks for the help Jonathan!

Link to post
Share on other sites

no worries.. i noticed when i was messing with scale in ie8 awhile back, that i had to have the element i was scaling to be absolutely positioned. Glad to help! :)

Link to post
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 post
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 post
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 post
Share on other sites

Hi Joe,

 

What you could use to run IE8 in win7 is Oracle VirtualBox https://www.virtualbox.org/. You install it and then you download the IE8 image from http://modern.ie

 

And in order to see the codepen in IE8 you have to select the full screen view from the share button.

 

Hope this helps,

Rodrigo.

  • Like 1
Link to post
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 post
Share on other sites

I tested http://duke.innovah.com/dukeregional/test.html in real IE8 it works fine.

Scales up and down when you click the image.

 

You can NOT rely on IE9+ reliably rendering things as IE8 would... regardless of what browser or document mode you switch to.

  • Like 1
Link to post
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 post
Share on other sites

I just looked at the "full" view of your codepen: http://codepen.io/jonathan/full/boclF in IE8 and again it scales fine. It looks the same as in Chrome, just not as smooth.

I'm not sure I know what you mean by it "translates" but doesn't scale. 

Link to post
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 post
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 post
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 post
Share on other sites

Hey Joe,

 

The site is looking real nice.

For what its worth, the latest link works in my real IE8 on win7. 

Clicking on parking scales down, clicking on the hospital logo scales it back up. 

  • Like 1
Link to post
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 post
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 post
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 post
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.

×