Jump to content
GreenSock

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

IE 11 Inconsistencies in Animation

Recommended Posts

Hi Greensock Community,

 

I have been working on an intro animation that runs fine on chrome and firefox. I tested in IE11 and have been plauged with what seems to be inconsistencies in the rendering of aspect ratios of my svgs when the width of the slideshow is greater than 1200 px wide. It is really strange, I don't know how to tackle it but it seems to me that IE11 is tinkering with the aspect ratio when going to bigger width device. Can greensock help with this or are there other tricks I can use to get rid of this? Any help greatly appreciated.

 

John

See the Pen QNXqBY by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

If I understand your question correctly, this has nothing to do with GSAP. IE uses a different default way of scaling things. You can probably just tweak your CSS and/or the width/height attributes to normalize things. 

 

A quick Google search got me here: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ and https://css-tricks.com/scale-svg/. Sara Soueidan, for example, suggests explicitly setting the width to 100%. 

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

I agree with Jack 100%, this is not a GSAP issue.

 

IE11 has issues when dealing with aspect ratio. So sometimes you either need to define either the width or height to force IE11 to calculate aspect ratio properly.

 

Also IE11 has a bug in it where if you don't provide both width and height it might not preserveAspectRatio on your SVG. So sometimes adding width="100%" height="100%" on your SVG element <svg> could help.

 

But again this is a bug with IE11 and how it handles aspect ratio with SVG. So you will have to test to see which works in your scene.

 

Most of the time you can just play with the viewbox dimensions until you wont need a width and height, but IE11 is real picky on this.

 

Sometimes you also might have to add the css property display: block for your <svg> element, since the <svg> elements default display is inline.

 

Adding max-width: 100% can help along with Jacks advice of width:100%.

 

So there are different things you can do, but that all depends on the calculation of your viewbox.

 

Keep in mind in IE height is inherited by its parent. And IE has always been a cry baby when dealing with calculating height on elements with no height defined in the CSS stylesheet.

 

This could also help using a canvas hack to fix IE11 svg aspect ratio bug

 

http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

 

:)

  • Like 3
Link to comment
Share on other sites

Thanks guys. I appreciate your help and suggestions. I was fairly sure I was not dealing with GSAP issue as well, but wasn't convinced that I was dealing with an svg scaling in ie11 problem either. I didn't know if there was something that GSAP could offer that could alleviate this. I think this is a scaling problem now in ie that seems to involve aspect ratio. I had already tried the width: 100%, display: block, and a lot of configurations of preserveAspectRatio (xMidYMid, xMaxYMax, meet, slice, etc.) with no success. 

See the Pen ONeEwZ by jstafford (@jstafford) on CodePen

. This codepen shows width: 100%, max-width: 100%, and display: block using the svg css selector with no success. The preserveAspectRatio configurations work at some widths and not others. I haven't tried the canvas technique yet, but was hoping for a css fix. I will keep plugging away at this.

Link to comment
Share on other sites

You might have to specify only the height attribute on the <svg> element.

 

IE will assume all SVG heights to be 150px by default. So try and set a specific height attribute only and see if that helps.

 

You also might have to create some logic in JS to read the viewBox attribute and work out its height / width. And get the difference in the SVG's container width vs the viewBox width.

 

Good Luck!

  • Like 1
Link to comment
Share on other sites

See the Pen RazJXM by jstafford (@jstafford) on CodePen

; this is using the canvas shim . almost perfect. The B is not responding as well as the others though

Link to comment
Share on other sites

See the Pen JXQBrO by jstafford (@jstafford) on CodePen

; interesting thing is now that I am using the canvas shim, it normalizes the behavior across all browsers. the B being a little further away from the F and red middle part of the logo was easily fixed with a greensock change in x in my animation. Wow, this canvas technique really worked for me. I know ie 11 is less than 6% of the browsers right now, but I feel much better now. 

  • Like 1
Link to comment
Share on other sites

No worries,  sometimes you have to kick IE in the seat of its pants, to make it play nice :)

  • Like 3
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.
×