javascript - BootStrap でスクロールするとテキストエリアが上に移動する

Question

ブートストラップで開発したアプリケーションに問題があります。問題は、ボディの最大高さが設定されているモーダルがあることです。テキストエリアが含まれていますが、テキストエリアをタップするとフォーカスが得られます（今までは正しい）が、モーダルヘッダーの上に表示されているモーダルボディにあるテキストエリアを下にスクロールすると、ある種の重複が表示されますテキストエリア。しかし、スクロールを停止するとすぐに、すべてが再び完璧になりました。

<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>