移动端点击ic-1按钮背景下滑，iPhone/iPad兼容性问题求助

每次点击ic-1区域内的按钮时，背景会出现下滑现象。经多设备测试，Redmi、Windows及Windows响应式移动端视图均无此问题，仅iPhone和iPad存在该问题，且iPhone的情况更严重，背景无法像iPad那样恢复至原位置。已尝试调整z-index、将ic-1::before的position从absolute改为fixed，但均未解决问题。

相关代码片段 #

CSS代码 #

.ic-1::before{
    content:'';
    top:0;
    left:0;
    width: 100%;
    height: 50vh;
    z-index: -1;
    position: absolute;
    filter:brightness(.4) contrast(1.25);
    background-image:url('image/bg5.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.ic-1 div{
    display: flex;
    justify-content: center;
}

.login-form div{
    display: flex;
    width: 100%;
}

.ic-1 div button{
    cursor: pointer;
    border:1px rgb(255, 255, 255) solid;
    background:none;
    text-shadow: 1px 1px 2px black;
    color:rgb(255, 255, 255);
    margin-right: 1em;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 2em;
}

.ic-1 div button:hover{
    background: rgb(255, 255, 255);
    color:black;
    text-shadow: none;
    border-radius: 10px;
}

React代码 #

<div className='ic-1'>
    <h1><span>asd</span></h1>
    <p>blah blah blah</p>
    <div>
        <GrantToken></GrantToken>
        <a href="#origin">
            <button className='review-form' style={{textDecoration:'none'}}>extra <i className='bx bx-chevron-right'></i></button>
        </a>
    </div>
</div>

解决方案 #

1. 禁用iOS触摸异常行为 #

iOS Safari的触摸交互容易触发意外滚动或弹性效果，给按钮添加触摸行为限制，同时优化父容器的溢出设置：

.ic-1 {
    position: relative; /* 确保伪元素absolute定位的上下文正确 */
    overflow: hidden;
}

.ic-1 div button {
    touch-action: manipulation; /* 禁用双击缩放等不必要的触摸行为 */
    -webkit-tap-highlight-color: transparent; /* 移除iOS点击高亮，减少干扰 */
}

2. 固定背景定位 #

强制背景居中，避免滚动时偏移：

.ic-1::before {
    background-position: center center;
}

3. 修正锚点链接的影响 #

代码中的<a href="#origin">可能触发页面滚动异常，若不需要锚点跳转，可阻止默认行为：

<a href="#origin" onClick={(e) => {
    e.preventDefault();
    // 如需跳转可在这里手动处理逻辑
}}>
    <button className='review-form' style={{textDecoration:'none'}}>extra <i className='bx bx-chevron-right'></i></button>
</a>

4. 修复fixed定位的上下文问题 #

若使用fixed定位无效，检查父元素是否存在transform属性（该属性会破坏fixed的定位上下文）：

.ic-1::before {
    position: fixed;
    top: 0;
    left: 0;
}

.ic-1 {
    transform: none; /* 确保父元素无transform干扰 */
}

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