在微信网页中的fixed问题（7.0以后）
发布于 6 年前 作者 juanren 5006 次浏览 来自 问答

运行环境： ios微信（7.0版本以上）网页开发

出现Bug ： fixed定位的bug

操作流程： 在IOS系统中, 微信版本升级至7.0 及以上 ,用户打开 点击输入框 弹出输入法 , 输入字符,  关闭输入法,

预期表现： 输入法正常返回底部

实际表现： 输入法返回底部 ( 装input的容器用css的fixed定位在底部 ) , 但是,只是视觉上返回了底部, 点击底部的输入框没反应,需要点击空白处 ( 输入法弹出后顶上去的位置 ) 才可再次触发input

备注： ios用户 微信未更新到7.0的表现是正常的, 更新后就会出现上述Bug

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fixed问题复现</title>
    <style>
        .footer{
            position: fixed;
            bottom: 0;
            left: 10px;
            right: 10px;
            height: 80px;
        }
        .send{
            display: flex;
        }
        input{
            flex: 1;
            height: 40px;
            padding-left: 5px;
            border: 0;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid red
        }
        button{
            margin-left: 6px;
            display: block;
            border-radius: 3px;
            height: 40px;
            padding: 0 20px;
            border: 0;
            background-color: #5FB878;
    color: #fff;
        }
    </style>
</head>
<body>
    <div class="footer">
        <div class="send">
            <input type="text">
            <button>发送</button>
        </div>
    </div>
</body>
</html>
1 回复

你好，可以提供下可以复现问题的信息么，不如在哪个程序上，具体要怎么操作可以复现

回到顶部