Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Wigchert

Few problems with IE7 & 8 (regarding scaling and gradient)

Recommended Posts

Hey everyone,

 

At the moment I'm working on a small class for myself to make different animated buttons with javascript, html and css (personal pre-made buttons to add them to project in the future). I'm making as much different animation I can think of :) growing, shining, depth, vibrating etc etc...

 

I am now at the part where I am making them compatible for all browsers as much as possible (it's horror...) and working on a button that scales larger on mouse over. In all browsers this works perfectly fine except in IE7, IE8, and most likely IE6 too but I cant test that one.

 

In these browsers the button does animate somewhat but does not expand and when it animates it removes the gradient filter that was on it...

 

I have no idea how to enter this in jsfiddle, it's fairly complex :/

Because I want it to use as few files as possible and only want 1 line of code in the main document to call a button from the class, I generate the html and css of the button inside the JS file.

 

The gradient I use for IE 7-9 is:

gradientIE79 = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="+ color2 +", EndColorStr="+ color1 +");

(color1 and color2 get added dynamically)

 

and on the same button I use the follow Tween:

TweenLite.to(button1, 0.25, { css:{scaleX:1.15, scaleY:1.15}});

 

What happens on my screen is that the button does show a sign of scaling, the top left corner of the button (I can see it because it still has a border around it) moves to the left corner to which it is supposed to tween. The problem is that the whole button move to the top left, it just re-positions instead of growing.

 

Not only does it re-position but it also gets rid of the gradient that was on it as soon as the tween starts.

 

I know it's all very confusing and I'm trying to explain it as good as I can. If there is anything not clear or if I left anything out, let me know.

 

Thanks

Link to post
Share on other sites

Hi and welcome to the forums,

 

Mhh.... it seems like a job for Jack and/or Carl here. The problem is not when you scale down and then back to 1, that works fine in IE 6, 7 & 8 (which are the ones that don't support css3 transforms). The problem is when you set a scale number bigger than 1. For example if you set a scale smaller than 1 in mouse out and a scale bigger than 1 in mouse over, it won't scale past the original size. And in IE7 it does changes the margin-left property of the first element to 0

 

For more illustration check the following:

 

http://jsfiddle.net/rhernando/EjxPJ/1/

 

Best ,

Rodrigo.

  • Like 1
Link to post
Share on other sites

Thanks, Rodrigo. Great fiddle.

 

Hi Wigchert, Welcome to the GreenSock forums.

 

I forked the fiddle further to show how IE8 will scale elements with position:relative.

What happens is the item scales but nothing will be rendered outside the normal dimensions of the item being scaled, in essence a clipping effect happens.

 

If you set position:absolute then the item will scale as expected.

 

View this fiddle in IE8: (the real IE8, not IE9's dev tools version)

http://jsfiddle.net/rTWwk/2/

 

The items in the second row illustrate how the different position settings affect scale in IE8.

 

As for the gradient getting messed up. I can only imagine that being a limitation of IE.

I'd recommend you do a few tests without TweenLite/Max and see how gradient and matrix transform filters work together. I imagine you will get similar unfortunate results.

 

To generate a matrix filter for scaling, check this out: http://www.useragentman.com/IETransformsTranslator/

 

I'm very excited to hear that you are using GSAP JS for your button class. I think at some point you just have to plan for things to degrade gracefully for IE7. Fortunately, I've been seeing that only 1.x% of users are using it. Its virtually dead. IE8 may still be thorny for you.

 

If you can provide very simple fiddles or sample code of TweenLite not providing the expected results, we will do our best to figure out why. You may very possibly stumble into an issue that can be addressed with the CSSPlugin.

 

Let us know if we can be of any more help with this issue or others.

 

Carl

  • Like 2
Link to post
Share on other sites

Hey, Thanks for the replies and I'm sorry it took me a while, wasn't near a pc yesterday.

 

The buttons are placed absolute in my template. Unfortunatly I don't have a way of testing in the real IE7 and IE8, I have been using IE10 developer tools. I conclude from your reply that this causes problems?

 

When I change the button to scale down instead of up, it has the same result but moves to the lower right corner instead of the upper left. Now I'm just left wondering if this is a limitation of the developer tools of IE.

 

This button class is eventually meant to be used inside html based banner ads and our statistics show that still roughly 12% of our total impressions use IE7 and 8. This is still quite a large number not to be neglected. So at the moment I'm researching how viable html-based ads are and what the pros and cons are.

 

I have created a part of the class in jsFiddle as good as I could:

http://jsfiddle.net/mFyRh/3/

For some reason I couldn't get the TweenLite to work in the fiddle...

 

I'm really impressed with the Javascript version of TweenLite. Coming from an AS3 background working with this feels very familiar :)

Link to post
Share on other sites

Ok, so I just installed VirtualBox with images of windows versions of IE6,7 and 8. In those browsers my button doesn't even show up at all.

 

edit: but my jsfiddle in the previous post does show up, time for some debugging.

 

edit2: well, after some debugging and eventually pulling the hair out of my head I found out what was going wrong in IE and it's a bit awkward to say :P

I actually forgot that console.log didn't work in the old versions of IE...

So, I have the tween working now but one problem remains and that is the gradient disappearing whenever the tween starts, it's really weird.

Link to post
Share on other sites

To get TweenLite to work in jsfiddle you need to link to a hosted version of TweenLite using the "Add Resources" panel on the left. For ease of use, Just link out to a TweenMax.min.js that you have hosted somewhere.

 

---

 

So at the moment I'm researching how viable html-based ads are and what the pros and cons are.

 

Very cool that you are doing this research. My feeling is that if you want to use html-based ads in a way that matches the reach of Flash ads there are going to be many compromises you are going to have to make in terms of features and performance.

 

Even in situations where you can use "Flash-like effects" in older browsers you will probably find the performance to be horrible or bordering on "unacceptable". This of course has nothing to do with TweenLite, its just that those older flavors of IE (and firefox and safari) just stink.

 

Flash ads have been served to those older browsers for ages and they run fine. Trying to get a full-featured html-based banner ad to run on IE6/7 seems like trying to solve a problem that doesn't exist. Those folks can get a swf or gif and be just fine.

 

I think with the new JS/CSS effects we should use this technology to solve the problem of Flash not being available on mobile devices, and even there you will find that there are going to be limits concerning what you can expect in terms features and performance.

 

I think if it were at all viable to create rich html-based ads that serve a wide audience, we would have seen some evidence of this years before the iphone came on the scene.

 

In terms of banner ads, I think we are still at a point where there is a choice between the following workflows.

 

Workflow 1:

1) Have full-featured, high-powered swf ads for the majority of desktop users

2) Create pretty decent "html" versions for iOS/mobile

3) have gifs ready for the ancient folks

 

 

Workflow 2 (no flash):

1) Create the best html ads possible (using GSAP JS) for modern desktops and iOS/mobile

2) use basic swfs or gifs for fallbacks.

 

I really don't see creating just 1 html-based version of an ad to serve all audiences being a real alternative right now, without of course serious limitations in performance and features.

 

This is just my gut feeling. I certainly think the fact that you are researching this is extremely important. I think a lot of people frankly have no idea what's "really possible" in terms of serving ads in html/js/css to a wide audience.

 

It's our intention here at GreenSock to better educate people about what their expectations should be when using our tools in older browsers. CSSPlugin handles many browser inconsistencies to make your life as a developer as easy as possible. Still, there are going to be some situations where the browsers are going to render things differently than you expect because of their own bugs that are impossible to get around.

 

The IE filters from what I understand are very poorly optimized and not well-suited for animation. There isn't going to be too much that we can do to prevent IE from choking on its own mess.

 

If throughout your research you can pinpoint instances where TweenLite fails to give the results you are expecting, please don't hesitate to let us know.

 

-c

Link to post
Share on other sites

At the moment our ads are SWF files with a gif fall-back and we are aiming to what you explained in workflow 2. Our platform allows us to target audiences very very narrowly, that means also based on what browser they use.

 

We already have some html banners running and they are doing very good. I'm so thankful that the company I work at decided to not target IE6, saves me a great deal of work :) IE7 and 8 are a pain but still do-able.

 

It's true that the HTML banners do not perform optimal in the older browsers but if that means we can have interactive and interesting banners on mobile devices, so be it.

 

The features of HTML5 look very promising, specially for mobile (which is going to be my aim eventually), Access to the accelerometer/gyroscope, saving pictures to local photos, adding calender events and in-ad videos. All these features can be used to make very effective ads on mobile platforms and will be even more so with the new upcoming MRAID 2.0 standard.

 

After running several tests on mobile devices and normal PC's I haven't found any limitations or problems regarding TweenLite yet but if there is anything to make it perform better, bugs and what not, I will let you guys know :)

 

I do have one question regarding the licence, when is one needed and when not? Would it be needed for publishing ads?

 

Thanks for creating such an awesome tool and making my work a lot easier and more fun :D

Link to post
Share on other sites

I've attached an updated version of the CSSPlugin (and all the js files) that I believe resolves the issue that eliminated the gradient when the tween started. Would you mind taking a peek and letting us know if it fixes things for you?

 

Also note that the latest version has a bunch of new capabilities like tweening 3D transforms (rotationX, rotationY, z, perspective, etc.) as well as boxShadow, textShadow, borderRadius, and clip (in browsers that support those features). That's why the file size is bigger than before. We'll likely be releasing this new version publicly next week sometime. Pretty exciting actually.

 

Let us know what you think.

updated_2012-11-23.zip

  • Like 1
Link to post
Share on other sites

Hey Jack,

 

Thanks so much for those files! Wasn't able to test them over the weekend but did it first thing today and it works great!

 

I'm looking forward to play around with the new features, I'm sure it's going to be a lot of fun ;)

 

Thanks for the great support, really impressed!

 

Cheers

 

Edit: after some more testing so far I have noticed one thing. The gradient still disappears when an opacity tween is called instead of a scale tween in my original post. I believe this is caused by overwriting filters in IE?

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.

×