iOS15/16 Safari单标签模式下输入框聚焦滚动异常问题求助

问题成因 #

这个问题是iOS Safari在单标签模式下的特殊视口行为导致的：当输入框聚焦时，Safari会调整顶部搜索栏的高度，而你的容器使用了height: 100vh，vh单位会随视口变化，再加上flex布局的align-items: flex-start和输入框的flex:1，就触发了这个异常动画。

可行解决方案 #

1. 替换100vh为动态视口单位 #

iOS Safari支持dvh（动态视口高度），它会自动排除浏览器UI的影响，替代固定的vh：

.inputContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
    height: 100dvh; /* 替换100vh为100dvh */
    width: 100%;
}

2. 固定视口并禁用滚动调整 #

如果需要兼容不支持dvh的版本，可以通过meta标签和CSS配合：

• 在HTML的<head>中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 调整容器样式，用定位锁定容器：

.inputContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* 用上下左右定位替代100vh */
    width: 100%;
}

3. 调整flex布局对齐方式 #

如果不需要align-items: flex-start，可以改为align-items: stretch，让输入框自动填充容器高度，避免视口变化时的布局偏移：

.inputContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; /* 替换flex-start为stretch */
    background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
    height: 100vh;
    width: 100%;
}

4. 给输入框添加固定尺寸约束 #

给输入框设置明确的高度或内边距，避免flex布局在视口变化时重新计算尺寸：

.input {
    flex: 1;
    color: var(--grey-700);
    font: var(--regular) var(--body-3);
    padding: 12px 16px; /* 添加固定内边距 */
    height: 48px; /* 设置固定高度 */
    box-sizing: border-box; /* 确保内边距不影响总高度 */

    &::placeholder {
        color: var(--grey-500);
        opacity: 1;
    }

    &:focus {
        &::placeholder {
            opacity: 0.5;
        }
    }
}

验证建议 #

优先尝试dvh方案，这是最简洁的现代解决方案；如果需要兼容旧版iOS，可以使用固定定位的方式。测试时务必在iOS 15/16的Safari单标签模式下验证效果。

内容的提问来源于stack exchange，提问作者vvv