在打开虚拟键盘的情况下向上滚动时,固定位置在移动 Chrome 上不起作用

问题描述 投票:0回答:0

我有一个用 React 制作的聊天机器人应用程序。我的问题是我的输入字段,它应该始终固定在底部。起初它按预期固定在虚拟键盘上方,但如果我向上滚动大约一半,它就会消失在虚拟键盘下方。此问题仅出现在移动版 Chrome 上,不会出现在 Safari 或三星浏览器上。

这是我的固定输入字段的样子:

输入框的JSX:

return (
    <div className={styles.input-field}>
      <form onSubmit={submitHandler}>
        <textarea value={inputValue} placeholder='Enter your message' onKeyDown={enterKeyHandler} onChange={messageHandler} aria-label='enter your message'></textarea>
        <IconButton title="Send" type="submit" aria-label='send'><img src='img/send-button.png' className={styles.button-icon} alt="send"/></IconButton>
      </form>
    </div>
  )

CSS:

.input-field {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 2;
}

这是它的父容器的样子:

JSX:

  return (
    <div className={isOpen ? `${styles.chat-container} ${styles.chat-open}` : `${styles.chat-container} ${styles.chat-closed}`}>
        <ChatHeader/>     
        <div className={styles.chat-inner}>
         ...
        </div>       
      <ChatInput/> <!-- the affected input -->
    </div>
  )
.chat-container {
   width: 100%;
   top: 0;
   left: 0;
   height: 100vh;
   bottom: 0;
   overflow: hidden;
   border-radius: 0;
   box-shadow: none;
   position: relative;
   z-index: 1;
}
.chat-open {
   display: flex;
}

.chat-closed {
   display: none;
}

我尝试用

position: fixed
position: absolute
替换
position: sticky
但同样的事情发生了。我也尝试过在我的
<meta name="viewport" content="minimum-scale=1"/>
元标记中添加
index.html
,正如我所看到的那样,但它什么也没做。对于它的价值,当我向上滚动并且标题(也有
position: fixed
并且也有相同的行为)进入视口时,问题似乎发生了。再一次,这个问题不会发生在其他浏览器上,也不会在虚拟键盘关闭时发生,所以我在这里有点迷路。任何形式的帮助表示赞赏!

css google-chrome mobile css-position
© www.soinside.com 2019 - 2024. All rights reserved.