Chrome中的JQuery过渡抖动

Question

以下代码适用于Firefox，但在Chrome中执行时遇到问题。

这个想法很简单;点击后更改'max-height'属性并显示其余文本。为每个元素本身计算高度，并通过jQuery的.transition（）执行转换。 JS做了它的工作，但过渡的代表性很差。如果我减少过渡时间看起来好一点，但距离预期还很远。

有关如何修复Chrome中的表示的任何想法？

public function search(Request $req)
    {

   $divisions = Division::all();
   $name = $req->input('search');

   $doctors = User::where('name', 'LIKE', '%' . $name . '%')->get();

   return view('users.search')
               ->with('divisions',$divisions)
                ->with('doctors',$doctors);

     }

 $(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;
}