Bootstrap 3.0 Collapse Horizontally - Bounces in Chrome

Question

I\'m following the instructions here (https://stackoverflow.com/a/18602739/2966090) to collapse an element horizontally in Bootstrap 3.0.2.

This met

Answer 1

I was able to reproduce your problem, but the solution i found is not Chrome related.

I found some CSS code was missing and a little 'bug' in the plugin code. I have already wrote a PR to fix that, see: https://github.com/twbs/bootstrap/pull/15104

Demo: http://jsfiddle.net/zu5ftdjx/

To fix this issue in your current code:

in collapse.js: line 104 should become this.$element[dimension](this.$element[dimension]())[0][$.camelCase(['inner', dimension].join(''))]

less (in component-animations.less)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  &.width {
  .transition-property(~"width, visibility");
  width:0;
  height:auto;
  }
  .transition-duration(.35s);
  .transition-timing-function(ease);
}

css (compiled output of the preceding Less code)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}