<p dir="auto">Upon opening the collapsable element in Safari 7, after the opening animation completes the element quickly closes and opens up again. The closing animation also appears to not fire correctly; the element just closes without animating/with an accelerated animation. This is NOT an issue in version 3.0.3 and older.</p>
<p dir="auto">This appears to be related to the height being set at "auto" at the end of the animation ("<a href="'auto'">dimension</a>", line 523 in unminified JS). Is there a reason this is being applied?</p>
<p dir="auto">I've searched the issues before submitting but did not find this issue reported.</p>
<p dir="auto">This is using Bootstrap 3.0.0 and does not appear to be browser-dependent.</p>
<h2 dir="auto">Steps to reproduce</h2>
<ol dir="auto">
<li>Open this <a href="http://jsfiddle.net/lddubeau/gvcDr/" rel="nofollow">fiddle</a>.</li>
<li>Click on "Toggle" to collapse the first column.</li>
<li>Click on "Toggle" to uncollapse the first column.</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The column should uncollapse to its original width.</p>
<h2 dir="auto">Actual behavior</h2>
<p dir="auto">The column takes as much width as the browser will give it.</p>
<h2 dir="auto">Observations</h2>
<p dir="auto">The problem is that <code class="notranslate">$.collapse()</code>, instead of just <strong>removing</strong> the CSS styling it added to the element to collapse it, forcibly sets the dimension of collapse to the <code class="notranslate">scroll[Dimension]</code> attribute of the element being collapse and then to <code class="notranslate">"auto"</code>. This effectively overrides any styling that was previously done through the <code class="notranslate">style</code> attribute (which may be fair game) and styling done through the application of CSS stylesheets.</p>
<p dir="auto">The fiddle gives a horizontal example but the issue is the same in either dimension. Also, while the fiddle uses the grid system, this happens whenever the CSS sets a specific dimension on the element which is to be collapsed and the collapsing is set to happen on this same dimension. So this is not a grid-dependent issue.</p>
<p dir="auto">A quick edit of the boostrap.js file I have here shows that simply removing the dimension (width or height) from the CSS of the element is enough to get the expected behavior. What I've done is make <code class="notranslate">show</code> end with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    this.$element
      .one($.support.transition.end, $.proxy(complete, this))
      .emulateTransitionEnd(350)
    this.$element.css(dimension, &quot;&quot;)"><pre class="notranslate"><code class="notranslate">    this.$element
      .one($.support.transition.end, $.proxy(complete, this))
      .emulateTransitionEnd(350)
    this.$element.css(dimension, "")
</code></pre></div>
<p dir="auto">And made the <code class="notranslate">complete()</code> function local to <code class="notranslate">show</code> <strong>not</strong> set the dimension to <code class="notranslate">"auto"</code>.</p>
<p dir="auto">I've used a workaround like this to at least get the original dimension back but this workaround makes the transition uneven:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    jQuery(&quot;#collapse&quot;).on(&quot;shown.bs.collapse&quot;, function () { jQuery(this).css(&quot;width&quot;, &quot;&quot;); })"><pre class="notranslate"><code class="notranslate">    jQuery("#collapse").on("shown.bs.collapse", function () { jQuery(this).css("width", ""); })
</code></pre></div>