使用 Safari 在输入焦点上不需要的自动滚动到顶部答案

【问题标题】：Unwanted auto-scrolling to top on input focus, with Safari使用 Safari 在输入焦点上不需要的自动滚动到顶部
【发布时间】：2019-04-23 17:00:31
【问题描述】：

我有这个页面：

    <html>

      <body>
        <div class="app">
          <div class="main-panel">
            <nav class="navbar"></nav>
            <div class="sidenav">
              <ul>
                <li>First</li>
                <li>2nd</li>
                <li>3rd</li>
                <li>4th</li>
              </ul>
            </div>
            <div class="page-container">
              <div class="placeholder">
                <ul>
                  <li>First</li>
                  <li>2nd</li>
                  <li>3rd</li>
                  <li>4th</li>
                </ul>
              </div>
              <input type="text">
            </div>
          </div>
        </div>
      </body>

    </html>

还有下面的css：

    html, body {
      height: 100%;
      width: 100%;
      position: fixed;
      overflow: visible; }

    .app {
      background-color: #f4f5f8;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto; }

    .main-panel {
      height: 100%;
      display: grid;
      grid-template-columns: 210px 1fr;
      grid-template-rows: 76px 1fr; }

    .navbar {
      grid-column: 1 / 3; }

    .page-container {
      overflow-y: auto;
      overflow-x: hidden; }

    .placeholder {
      display: block;
      height: 500px;
      width: 100%; }

也可以在：https://jsfiddle.net/1vk5jcuL/

在 Safari 12.1（MacOS 和 iOS）上，如果您向下滚动主体并将鼠标悬停/焦点放在输入上，它将自动滚动到顶部。

我想保持滚动行为相同（即，当您滚动时，您只滚动主面板，而不是侧导航，但 safari 不应该滚动到输入焦点的顶部。

这个问题纯粹是HTML + CSS，所以不涉及JS。

编辑：这是它发生的 GIF 记录：https://imgur.com/a/hPD9YuP

【问题讨论】：

我无法在 MacOS 上的 Safari 中复制所述行为。我向下滚动到输入字段，将鼠标悬停在它上面，单击它，按 Tab 键，无论它如何获得焦点，都不会发生滚动，内容保持不变。
很奇怪，我刚录了一段视频：imgur.com/a/hPD9YuP
我刚查了一下，Safari 12.0.x 中没有，但我在 Safari 12.1 中确实发生了

标签： html ios css safari mobile-safari

【解决方案1】：

将1fr 替换为minmax(0, 1fr) @helios。它对我有用。这是它的完整解释。 https://css-tricks.com/preventing-a-grid-blowout/。我用你的小提琴测试过。效果很好。

【讨论】：

在扯掉我的头发 3 小时后找到了这个修复程序，试图弄清楚为什么会发生这种情况。它还取消了任何附加的事件处理程序（通过 React）。这个简单的更改如何影响 Safari 的事件处理/滚动定位我无法想象，但确实如此。非常感谢！

【解决方案2】：

在您的页面容器上设置 max-height:100%

.page-container
  overflow-y: auto
  overflow-x: hidden
  max-height: 100%

【讨论】：