Javascript Cordova应用程序-切换到WKWebview后必须双击以选择div

我有一个基于React的Cordova应用程序，自从切换到WKWebview后，我注意到当我点击我的消息容器时，我的根元素偶尔会被选中

看起来是这样的：

<div id="root">
   <div>
      <header>
         <div class="linkback">
            <div class="triangle"></div>
         </div>
      </header>
      <div class="switch-wrapper">
         <div style="opacity: 1;">
            <div>
               <div class="chat-title">Name</div>
               <div id="messages-container" style="transform: translate3d(0px, 0px, 0px);">
                  <div id="messages" style="transform: translate3d(0px, 0px, 0px);">
                     <div class="message right"><span>Test</span></div>
                     <div class="message right"><span>Test2</span></div>
                     <div class="message right"><span>Test3</span></div>
                     <div class="message right"><span>Test4</span></div>
                     <div class="message right"><span>Test5</span></div>
                     <div class="message right"><span>Test6</span></div>
                     ...
                     <div class="bottom-scroll" id="bottom-scroll"></div>
                  </div>
               </div>
               <div class="msginput">
                  <div class="inner-keyboard">
                     <textarea placeholder="Message..." class="textareainput" name="msginput" rows="1" style="max-height: 54px; overflow: hidden; word-wrap: break-word; height: 22px;"></textarea>
                     <div class="sendbutton">Send</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="Toastify"></div>
   </div>
</div>

#messages {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  height: 75vh;
  padding-bottom: 0em;
  z-index: 100;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  cursor: pointer;
}
.message {
  width: 100%;
  padding: 4px 0;
}
.right {
  text-align: right;
}
.message span {
  width: 40%;
  padding: 8px 10px;
  border-radius: 12px;
  display: inline-block;
  text-align: left;
}
.message div {
  padding: 6px 10px;
  display: block;
  margin: 0 20px 8px 20px;
  color: #bbbbbb;
  font-size: 1em;
}
.message.left span {
  background-color: #cccccc;
  margin-left: 2em;
}
.message.right span {
  color: #ffffff;
  margin-right: 2em;
  background-color: #536dfe;
}
#messages-container {
  height: 100vh;
  position: fixed;
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 99;
  cursor: pointer;
}

当我以某种方式正确地选择元素（#messages）时，它会按预期工作。否则，我只拉父div，要么#root，要么#root>div

如何在不意外移动任何其他内容的情况下滚动#消息

我只是在将我的webview更新为WKWebview后才注意到这种情况