Jump to content
GreenSock

Visual-Q

SVG container height issues ie11

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

This is a css or svg problem not specifically gsap but it affects my animation so maybe someone can shed some light on it.

 

I've got various svgs on my page. They are working fine except that ie11 seems to be adding extra height to the container. This happens regardless of whether the svg is inside an img tag or placed as inline code and regardless of whether the svg has internal height and width or preserve aspect ratio settings. This is to say it occurs on svgs with only an internal viewbox setting and svgs with viewbox and additional height/width/aspect ratio setting equally.

 

For instance an svg with viewbox 0 0 500 500 scales responsively and computes to equal values height and width in chrome safari etc but in ie11 the height is larger. The svg content isn't stretched it renders correctly there just seems to be extra height to the container added that's throwing page element out of alignment.

 

It seems that ie11 just wants to arbitrarily add height to the svg container. Does anyone know why this occurs?

 

 

Link to comment
Share on other sites

For anyone who can benefit from it I found this discussing it https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/.

 

The solutions contained in it appear to fix the issues in ie11 at least for inline svg code and svg in img tags that i needed it for.

 

in my case this worked:

 

width:100% on img tags

 

and on containing element for svg objects/code i.e.(div.svg-container > svg)

 

  .svg-container {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

.svg-container svg {
    position: absolute;
    top: 0;
    left: 0;

}

 

 

 

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