前端常见bug系列3:<input type="text">中emoji表情与文字并存时表情被截掉一部分

简介: 比如,有这个一个demo页面: ``` Title .text-input{ font-size: 1.2rem; line-height: 1.2rem; height: 1.2rem; border: 1p

比如,有这个一个demo页面:

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        .text-input{
            font-size: 1.2rem;
            line-height: 1.2rem;
            height: 1.2rem;
            border: 1px solid #eee;
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <h2>input type="text"中输入emoji表情时表情被截掉一部分的bug</h2>
    <input class="text-input" type="text" name="comment">
</body>
</html>

当你在手机上(比如iPhone 5S)浏览这个页面,并在页面的输入框中输入一些中文内容的同时再输入几个emoji表情的时候, 会发现emoji表情无法完整显示,看起来就像有一部分被裁切掉了。

问题发现了,处理起来就比较简单了——加大行高, 比如, 加大到1.5rem。这个问题不难, 之所以收录进来,是因为自测的时候,很容易忘记对emoji表情这种特殊的输入进行测试验证,从而最终导致bug的存在。

目录
相关文章
|
4月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
173 0
|
12月前
|
前端开发 测试技术
你发现一个bug,如何定位这个是前端还是后端缺陷?建议收藏
你发现一个bug,如何定位这个是前端还是后端缺陷?建议收藏
436 0
|
11月前
|
Web App开发 前端开发 开发者
|
11月前
|
前端开发 安全 程序员
测试大姐趁我下班点又提了个bug!前端你咋多个options请求?
测试大姐趁我下班点又提了个bug!前端你咋多个options请求?
76 0
|
4月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
189 0
|
2月前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
142 0
|
2月前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
29 0
|
3月前
|
前端开发 安全 JavaScript
如何区分是前端BUG还是后端BUG
1 基于经验 前端BUG特点: (1)界面排版、布局错误、兼容性问题 (2)网络不稳定导致JS或CSS未完全加载或请求超时(一般不需要提BUG),正常网络下加载超时 后端BUG特点: 业务逻辑、性能问题、数据问题、安全性问题 2 通过HTTP请求和响应信息 可以通过浏览器开发者工具(F12)、postman、fiddler(移动端可通过该工具抓包)、Charles、Proxyman、Wireshark、HttpCanary、tcpdump等工具。
56 1
|
4月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
35 0
|
4月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享