Textarea moving up when scrolling in BootStrap

Textarea moving up when scrolling in BootStrap

I have an problem in my application that i have developed in bootstrap.The
problem is that i have a modal whose body max-height is setted. It
contains a textarea,now when the tap on the textarea it gains the
focus(correct till now) but when i scroll to down the text area which is
in modal-body shown above the modal-header, it shows some type of
duplicacy of textarea. But as soon as i stop the scrolling everything gone
perfect again.
<div id="textPanel" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="padding-bottom: 5px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title">Add/Edit Text</h4>
</div>
<div class="modal-body" style="overflow-x: auto">
<div class="row">
<div class="col-12">
<div id="textPreviewPanel" class="outer"
style="height: 60px;margin-bottom:
5px;margin-top: -15px">
<div class="inner" style="height: 100%">
<img id="textPreview" style="height:
100%;text-align: center"/>
</div>
</div>
</div>
<div class="col-12">
**<textarea id="addTextInput"
ng-model="addEditTextModel" placeholder="Enter your
text here"
rows="3"
class="form-control" style="resize:
none"></textarea>**
</div>