Home/ Questions/Q 7430959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:13:17+00:00

I am encountering a potential bug while using jQuery 1.7.1 to animate the height

  • 0

I am encountering a potential bug while using jQuery 1.7.1 to animate the height of an SVG image. I want the image height to shrink to 0 while maintaining the same width. The following is a minimum working example of what I’m doing, and it works perfectly in Chrome and Safari. EDIT: as of Chrome 17, Chrome exhibits the same behavior as Firefox, described below; it’s necessary to set preserveAspectRatio="none" to get the desired behavior. Apparently the former behavior in Chrome was a bug (described in this bug report).

<!DOCTYPE>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
    var flip_timer = setInterval('flip()', 1000),
        flip = function() {
          var height = 64,
              width = 96,
              image = $('img');

          image.animate({'height': 64, 'width': 0}, 200, 'linear', function() {
                            image.animate({'height': 64, 'width': 96}, 200);
                       });
          };
  </script>
</head>

<body>
  <img src="image.svg" style="height:64px;width:96px;" /> 
</body>

</html>

However, in Firefox, the width changes as well as the height: it seems to be keeping the the same proportions (aspect ratio), so when I shrink the height, it shrinks the width as well. (Similar behavior occurs when I try changing just the width, but leaving the height the same.)

If I use a PNG rather than an SVG, Firefox works exactly as I expect.

I’ve also tried various versions of jQuery, back to 1.2.6, and saw no change in any of this behavior. I tried not setting the unchanging parameter, and I also experimented with passing in strings vs integers, or reversing the order that the width/height were passed in, and saw no changes.

Is this a bug in Firefox, a bug in jQuery, or something else? (I was hoping to gather some more feedback here before filing a bug report, in case this is already well-known or in case I made a mistake somewhere.) Thanks!

EDIT: here are the contents of the SVG I’ve been testing with, in case it helps:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="80px" height="60px" viewBox="0 0 80 60" enable-background="new 0 0 80 60" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="40.0005" y1="60" x2="40.0005" y2="4.882812e-04">
    <stop  offset="0" style="stop-color:#0D0D0D"/>
    <stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="80" height="60"/>
<path fill="#FFFFFF" d="M53.568,60c-0.006-2.305-0.082-5.051-0.234-8.261c-0.158-3.344-0.648-6.569-1.475-9.676
    c-0.826-3.108-2.164-5.764-4.012-7.965c-1.85-2.203-4.504-3.304-7.965-3.304c-3.383,0-5.979,1.101-7.787,3.304
    c-1.811,2.201-3.127,4.856-3.953,7.965c-0.826,3.106-1.318,6.332-1.476,9.676c-0.151,3.205-0.229,5.959-0.235,8.261H9.675
    c0.019-8.13,0.825-14.935,2.419-20.414c1.611-5.546,3.794-9.972,6.549-13.275c2.752-3.304,5.959-5.664,9.617-7.08
    c3.657-1.416,7.531-2.124,11.622-2.124c4.168,0,8.083,0.708,11.741,2.124s6.883,3.776,9.676,7.08s4.996,7.729,6.609,13.275
    C69.5,45.064,70.303,51.872,70.322,60H53.568z"/>
</svg>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The viewBox on the outer svg element which is being used as an image provides the image with an aspect ratio that it will keep. To work around this you can either:

    a) remove the viewBox altogether on the outer image svg element although that may change what’s visible in the image

    b) add preserveAspectRatio=”none” to the outer svg image element which will force the aspect ratio of the viewBox to be ignored and allow the container to force a size

    c) add preserveAspectRatio=”defer” on the outer svg image element which will allow the container’s preserveAspectRatio to be used but since you’re using an html image element as the container (rather than an svg image element) this might not work. On the other hand if it does it allows the image to keep its aspect ratio when displayed standalone but use the container’s when displayed as an image.

    • 0