为了重现问题，我在这里创建了codepen页面：codepen.io
这是聊天的html&css布局。当我向下滚动消息，然后在输入中键入第一个字母时，可滚动的内容会滚动到顶部。我不知道问题出在哪里，所以我请求社区帮助我理解为什么这种互动会影响滚动。
我希望输入永远不会影响滚动到顶部。
此问题仅出现在苹果设备上在Windows系统上，这非常有效。
@charset "UTF-8";
/*************************************** SIZES */
/* offsets */
/* cards */
/*************************************** Overrides for Bootstrap variables */
/*!
* Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
color: #000;
text-align: left;
background-color: #fff;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[hidden] {
display: none !important;
}
input:focus,
textarea:focus,
select:focus,
button:focus {
outline: none;
}
// end: default from Bootstrap (unused css removed for brevity)
// start: user css
.form-control {
border: none;
width: 100%;
background-color: transparent;
}
.chat-input {
display: flex;
position: fixed;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
box-shadow: 0px -4px 15px -3px #dee2e6;
font-size: 1em;
padding: 0.6em 1em;
position: relative;
border-top: 1px solid #e4e4e4;
border-bottom: none;
box-shadow: unset;
}
.chat-input__control {
flex: 1;
min-width: unset;
margin-right: 1em;
}
.chat-message {
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-size: 1em;
margin-bottom: 40px;
}
.chat-message__content {
padding: 0.75em 1.25em;
background: rgba(0, 123, 255, 0.1);
position: relative;
margin-right: 0.5em;
border-radius: calc(1em * 2);
text-align: left;
min-width: 6em;
line-height: 1.4em;
word-break: break-word;
}
.chat-message__time {
position: absolute;
color: #adb5bd;
right: 2em;
bottom: -1.8em;
font-size: 0.7em;
}
.chat-message_reverse {
flex-flow: row-reverse;
align-self: flex-start;
}
.chat-message_system {
display: block;
text-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-bottom: 24px;
margin-top: -8px;
}
.chat-message_system_message {
color: #adb5bd;
font-size: 0.9em;
}
.chat-message_reverse .chat-message__content {
margin-right: 0;
background: #f8f9fa;
text-align: left;
}
.chat-message_reverse .chat-message_reverse .chat-message__time {
left: 2em;
right: unset;
}
.chat-window {
display: grid;
grid-template-rows: auto 1fr 3.4rem;
font-size: 1em;
max-height: calc(100vh - 50px);
background-color: #fff;
}
.chat-window__nav {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
box-shadow: 0px 4px 15px -3px #dee2e6;
grid-area: 1/1;
margin-bottom: 0;
z-index: 1;
background-color: #fff;
}
.chat-window__content {
grid-area: 2/1;
padding-top: 2.25em;
padding-left: 0.6rem;
padding-right: 0.6rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.chat-window__input {
grid-area: 3/1;
}<div class="chat-window">
<div class="chat-window__nav">
Username
</div>
<div class="chat-window__content">
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">hello</div>
<div class="chat-message__time">6:21 PM</div>
</div>
</div>
<div class="chat-message chat-message_system">
<div class=" chat-message_system_message"> December 6
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">324234</div>
<div class="chat-message__time">11:31 AM</div>
</div>
</div>
<div class="chat-message chat-message_system">
<div class=" chat-message_system_message"> Today
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">овыроафоаыфа</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">аывфаывафвы</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">фавфафв</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">234325325</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">уцапапарвфвфыв</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">апцупцупуцп</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message__content">
<div class="">gfdhjgjjh</div>
<div class="chat-message__time">10:30 AM</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message__content">
<div class="">sdqdsa</div>
<div class="chat-message__time">10:41 AM</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message__content">
<div class="">safasf</div>
<div class="chat-message__time">10:41 AM</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message__content">
<div class="">36748235235</div>
<div class="chat-message__time">10:41 AM</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message__content">
<div class="">I am exhausted! :(</div>
<div class="chat-message__time">11:21 AM</div>
</div>
</div>
<div class="chat-message chat-message_reverse">
<div class="chat-message__content">
<div class="">I am exhausted too</div>
<div class="chat-message__time">2:30 PM</div>
</div>
</div>
</div>
<div class="chat-window__input chat-input">
<input class="form-control chat-input__control" placeholder="Enter your message" type="text">
</div>
</div>简而言之，将chat-window类重新布局为flexbox解决了这个问题。这个问题与Safari的CSS网格支持有关。我不知道具体是什么。。。