JQuery transition jittering in Chrome

Question

The code below works in Firefox, but having problem when executing in Chrome.

The idea is simple; after click change the 'max-height' property and show the rest of the text. Height is computed for each element itself and transition is executed via jQuery's .transition(). JS does it's work, but transition is represented poorly. It looks little better if I reduce the transition time, but still very far from expected.

Any ideas on how to fix representation in Chrome?

 $(function() {
   var Readmore = function(el) {
     this.el = el || {};

     var descriptionElement = this.el.find('#predmetDesc');
     var chevronElement = this.el.find('#showMore');
     var links = descriptionElement.add(chevronElement);

     links.on('click', this.sloppy);
   };

   Readmore.prototype.sloppy = function() {
     $this = $(this).parents().eq(1).find('#paragraph');
     $sibling = $this.siblings('#showMore');
     var expanded = $this.is('.expanded');

     if (expanded) {
       $this.transition({ 'max-height': '96px',
         overflow: 'hidden'
       }, 500, 'in', function() {
         $this.removeClass("expanded");
       });
       $sibling.transition({
         'rotate': '0deg'
       }, 500, 'in', function() {
         $sibling.removeClass("expanded");
       });
     } else {
       $this.transition({         
         'max-height': $this.get(0).scrollHeight,
         overflow: ''
       }, 500, 'out', function() {
         $this.addClass("expanded");
       });
       $sibling.transition({
         'rotate': '180deg'
       }, 500, 'out', function() {
         $sibling.addClass("expanded");
       });
     }
   };
   var readMore = new Readmore($('.sviPredmetiCol'), false);
 });

.paragraph {
  display: inline-block;
  max-height: 96px;
  overflow: hidden;
  padding-top: 23px;
  margin-bottom: -4px;
}
div.paragraph > p {
  text-decoration: none !important;
  cursor: pointer;
}
p {
  margin: 0;
}
#predmetDesc {
  position: relative;
  /*max-height: 97px; !*72px*!*/
}
#showMore {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  margin-bottom: -8px;
}
.fa-chevron-down::before {
  position: relative;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sviPredmetiRow">
  <div id="sviPredmetiId" class="col-xs-12 col-md-12 sviPredmetiCol">
    <div id="parentAbs" class="panel panel-primary sviPredmetiPanel">
      <div class="panel-heading">
        <div class="panelMainTitle">courseName</div>
      </div>

      <div class="panel-body">
        <div class="widget">
          <div class="statEcts">
            <div class="ects">
              <span class="count">courseInfo</span>
              <span class="desc">ECTS</span>
            </div>
          </div>
          <div class="statCourse">
            <div class="courseId">
              <span class="count">courseID</span>
              <span class="desc">ID predmeta</span>
            </div>
          </div>
        </div>
        <div id="paragraph" class="paragraph">
          <p id="predmetDesc">Course description</p>
        </div>
        <!--/div .paragraph-->
        <div id="showMore"><i class="fa fa-chevron-down"></i>
        </div>
      </div>
      <!--/div .panel-body-->
    </div>
    <!--/div .sviPredmetiPanel-->
  </div>
  <!--/div .sviPredmetiCol-->
</div>
<!--/div sviPredmetiRow-->