jquery slidedown and slideup wiggles div

Question

http://eusville.com/eusVote/1/baltimore-sushi

Click "Add Comment/Rate" button. As the comment box slides down, the page wiggles. Am very stumped. Googled around but can't find solution.

Odd thing is problem is in Chrome and Firefox. IE works smooth ...

The HTML div is: ... sorry, there's a lot of razor stuff there. Just ignore the @s ...

jQuery slides this Div up and down.

Tips appreciated ! TIA.

$(".buttonAddCommentRate").click(function () {    
    var crBox = $(this).closest('.answer-container').find('.answer-commentRateBox');    
    var buttonText = $(this).text();

    if (buttonText == 'Add comment/rate') {
        crBox.slideDown(300);
        $(this).text('Cancel comment/rate');
    }
    else {
        crBox.slideUp(300);
        $(this).text('Add comment/rate');
    }
});

.answer-comment{
    width:600px;
         float: left;
}
.answer-textArea{
    width: 500px;
    height: 180px;     
}

.answer-commentRateBox{
   display:none;
   overflow: hidden;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer-container">
            <div class="answer-main">
                <h4>@Model.ElementAt(i).Title</h4>

                @Model.ElementAt(i).Detail<br /><br />

                <button class="buttonAddCommentRate" data-id="@Model.ElementAt(i).AnswerID">Add comment/rate</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="span-buttonAddCommentRate">Log in to comment and/or rate</span>
            </div>

            <div class="answer-eusScore">
                eusScore (<span class="answer-count">@Model.ElementAt(i).Count</span>)<br /><br />
                <span class="span-answer-eusScore">@(Math.Round((decimal)(Model.ElementAt(i).RatingScore)))%</span>
            </div>
            <div class="answer-thankYou">
                Rating/comment posted
            </div>

            <br style="clear:both" />

            <div class="answer-commentRateBox">
                <br />
                <div class="answer-comment">
                    <textarea class="answer-textArea" placeholder="Comment must be more than 5 words ..."></textarea>
                </div>

                <div class="answer-rateIt">
                    <input data-id="@Model.ElementAt(i).AnswerID" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"><br />
                    <br /><br />
                    <button class="buttonSubmit" disabled data-id="@Model.ElementAt(i).AnswerID">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="buttonCancel">Cancel</button><br />
                    <span id="span-enable-message" style="font-size:smaller">(rate to enable)</span>
                </div>
                <br style="clear:both" />
            </div>

            <div>
                @*displays the comments using a partial view*@
                @{Html.RenderAction("Comments", "Topic", new { answerID = @Model.ElementAt(i).AnswerID });}
            </div>

        </div>

        <hr />

Answer 1

The issue you're experiencing is happening because the page gets a larger height than the viewport. This means a scrollbar will appear.

Add this to your css and it will probably fix your issue

 html {
     overflow-y: scroll;
 }

Answer 2

The scroll bar is pushing the page over a little. The two solutions are you can always show the scrollbar or you can always hide it.

Always show it:

body{
  overflow: scroll;
}

Always hide it:

::-webkit-scrollbar {
  display: none;
}

If you are going to always hide it I would also add the "always show it" code. The reason is the "hide it" code with overwrite the "show it" and if your browser does not support the "show it" code it gives it a sort of fallback.