iOS11のWebkitブラウザにおいて、モーダルウィンドウ内に配置した
textareaのタップ時にキャレットの位置がずれる問題を修正したいと思っています。
iOS11のキャレットのズレ

下記1の対策は画面構成の事情で見送り、2の対策はエラー発生前から実装済みのため、
CSSで何とか解決できないかと模索しています。

  1. 親要素の position: fixed を position: absolute に変更すると直る説
    How to fix the iOS 11 input element in fixed modals bug

  2. に position: fixed を指定すると直る説
    iOS 11 Safari bootstrap modal text area outside of cursor

■検証
・textareaのスタイルをリセットし、CSSで max-height: 1em line-height: 1 を指定
表示上の高さはCSSの指定通りになるが、初期キャレット表示のズレは解消しません。

キャレット表示後、2回目のタッチのまま上にフリックすると、キャレットが4行分くらい上に移動することを発見しました。
このことから、Webkitのレンダリング時、CSSのスタイルとは関係なく内部的にtextareaの高さを大きめに生成している、と予想しています。
HTMLとCSSは下記のような構成になっています。

■HTML

<div id="ajax_messemger">
    <div class="msg_window">
        <div class="msg_title">
            <p>タイトル</p>
        </div>
        <div class="msg_messaging_fix_box">
            <div class="msg_messaging_box">
                <div class="msg_messaging_height_box">
                    メッセージ表示エリア
                </div>
            </div>
        </div>
        <div class="msg_sending_box">
            <div class="msg_hamburger_menu">バーガーボタン</div>
            <textarea class="msg_send_form" placeholder="メッセージを入力" rows="2"></textarea>
            <div class="msg_send_button">送信ボタン</div>
        </div>
        <div class="msg_logo">
            フッターロゴ
        </div>
    </div>
</div>

■CSS

#ajax_messemger * {
  box-sizing: border-box;
  word-break: break-all;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
}
.msg_window {
  position: fixed;
  display: block;
  right: 0;
  width: 100%;
  height: 100%;
}
.msg_title {
  position: relative;
  display: flex;
  width: 100%;
}
.msg_messaging_fix_box {
  position: relative;
  width: 100%;
  height: calc(( 100% - ( 30px + 40px + 25px + ( 5px + 5px ) ) ));
  overflow: hidden;
}
.msg_messaging_box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.msg_messaging_height_box {
  position: relative;
  width: 100%;
  overflow: auto;
}
.msg_sending_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 45px;
  margin: 0;
}
textarea.msg_send_form {
  width: calc(( 100% - ( 30px + 50px + 10px ) ));
  height: 45px;
  min-height: auto;
  max-height: 2.4em;
  padding: 4px;
  font-size: 16px;
  border: none;
  resize: none;
  background: #f3f3f3;
}
.msg_send_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
}
.msg_logo {
  margin-top: 5px;
  font-size: 10px;
  text-align: left;
}

この現象をCSSだけで解決することは可能でしょうか？