IE10 and 11, unexpected behaviour of jQuery animate and overflow

Question

I used an animation which expands/collapses a form on an event. Works fine in FF, Chrome and Safari but IE10+ behaves unexpectedly and disturbs the alignment.

HTML:

<div id="w_oCExpandFormWrapper" style="position:absolute !important;">
    <div  class="w_oInput2" id="w_oCFirstField">
        <input type="hidden" id="w_oCRecomendTxt1"  />
    </div>
    <input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND"/>
    <textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
    <div  class="w_oInput2" id="w_oCThirdField">
        <input type="hidden" id="w_oCRecomendTxt3" />
    </div>
    <input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..."/><br/>
    <input id="w_oCRecommendButton" type="button"  style="margin-left: 239px;" value="RECOMMEND"/>
</div>

JavaScript:

to expand/collapse

//Expand
$('#w_oHExpandFormWrapper').css({"height":"auto","overflow":"auto"})
//Collapse
$('#w_oHExpandFormWrapper').css({"height":"20px","overflow":"hidden"})

and for animation is.

$('#w_oHExpandFormWrapper').animate({"height":"20px","overflow":"hidden"},"fast");

Please help!

better would be, in order to get some help, to provide a jsfiddle which replicate your issue — A. Wolff, Dec 13 '13 at 12:29

score 1 · Accepted Answer · answered Feb 25 '19 at 06:15

This animation code is based on Animate element to auto height with jQuery. Press the Trigger button to cycle through the jQuery function calls that mutate the styles in the snippet.

Your form wrapper id is different in the html and js in the question. The auto height you had wasn't working in Chrome either, but after 5 years who knows if this is still an issue, but you just edited the question to add a character...

let count = 0;
$('#trigger').on('click', function() {

  if (count == 0) {
    //Expand
    console.log('expand');
    $('#w_oHExpandFormWrapper').css({
      "height": "auto",
    });
  } else if (count == 1) {
    //Collapse
    console.log('collapse');
    $('#w_oHExpandFormWrapper').css({
      "height": "20px",
    });
  } else if (count == 2) {
    //Expand Animation
    console.log('expand animation');
    $('#w_oHExpandFormWrapper').animate({
      "height": $( '#w_oHExpandFormWrapper' )[0].scrollHeight,
    }, "fast");
  } else if (count == 3) {
    //Collapse Animation
    console.log('collapse animation');
    $('#w_oHExpandFormWrapper').animate({
      "height": "20px",
    }, "fast");
  }
  count = (count + 1) % 4;

});

#w_oHExpandFormWrapper {
  background: red;
  top: 40px;
  min-width: 200px;
  overflow: hidden;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="trigger">Trigger</button>

<div id="w_oHExpandFormWrapper" style="position:absolute!important;">
  <div class="w_oInput2" id="w_oCFirstField">
    <input type="hidden" id="w_oCRecomendTxt1" />
  </div>
  <input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND" />
  <textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
  <div class="w_oInput2" id="w_oCThirdField">
    <input type="hidden" id="w_oCRecomendTxt3" />
  </div>
  <input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..." /><br/>
  <input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND" />
</div>

Haha... right said, just to make exemplary definition for others in term of outright perspective. Resolved it then by changing in layout. At this time, IE10 is somewhat out from deliberation and people look for safer alternatives instead. Thanks for answer! — Kunj, Feb 25 '19 at 10:00

IE10 and 11, unexpected behaviour of jQuery animate and overflow

1 Answers1