移动端常见bug汇总续

发表于:2019-4-16 14:02

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:RobinsonZhang    来源:掘金

分享:
  前言
  上一篇之后我从各个小伙伴那里收集到了第二波移动端常见的bug以及其解决方案,部分解决方案可能不准确或者存在问题,希望有正确解决方案的给与评论。
  备注:文中的bug收集于网络,解决方案可能并不准确,欢迎大家提供更加完整的方案。
  建议阅读时间:10-15min
  fastclick导致下拉框焦点冲突
  Q: 移动端使用fastclick之后,在ios环境下,有几个连续的下拉框 第一个select框突然填充了第二个下拉框的内容。
  A:根本原因是Fastclick导致IOS下多个 select ,点击某一个,焦点不停变换的bug。修改源码,在onTouchStart事件内判断设备是否为IOS,再判断当前nodeName是否为select,如果是return false去阻止fastClick执行其他事件
  github源码地址:https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js
   //line 391行
  FastClick.prototype.onTouchStart = function(event) {
  //在其方法中添加判断 符合ios select的时候 不返回事件
  if(deviceIsIOS&&this.targetElement =="select")
  this.targetElement = null
  event.preventDefault();
  }
  //line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释,
  if (!deviceIsIOS || targetTagName !== 'select') {
  this.targetElement = null;
  event.preventDefault();
  }
  ios input不能自动获取焦点
  Q: 如题,希望在某个页面时可以自动让输入框获取焦点
  A: 解决方案:
  document.addEventListener('touchstart',function(e){document.getElementById('focus').focus();});不能把focus封装起来起来触发,那样也无效
  备注:具体实现效果待验证,希望有时间的可以验证追加可能的问题以及补充方案
  去除webkit默认的滚动条
  Q: 如题
  A: 解决方案:
   element::-webkit-scrollbar{
      display:none
    }
  video 不能自动播放
  Q: 如题
  A: 解决方案:
  (1) autoplay 及 js 控制播放,仍然有部分设备不起作用(2)
   $("html").one("touchstart",function(){
        video.play();
      })
  inline-block元素使用vertical-align后,父元素高度被莫名撑开
  Q: 如题,不一定出现在移动端,但是移动端会效果比较严重,一般是用于设置同行内容垂直居中的
  A: 解决方案:
   .par{
     font-size:0
    }
  背景图片没实现自适应
  Q: 如题
  A: 解决方案:用background-size
   element{
     background-size:100% 100%;
    }
  css3 translate3d平移效果后的元素子元素闪动
  Q: 应用css3 translate3d平移效果后的标签元素,在ios上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象,具体如下:
   <ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
  <li><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
  </ul>
  A: 解决方案:1、可在其子元素中统一添加和其相同的属性,具体如下:
   <ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
  <li style=”-webkit-transform: translate3d(0, 0, 0); “><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
  </ul>
  2、在其元素中添加如下属性:
  -webkit-backface-visibility: hidden; (设置进行转换的元素的背面在面对用户时是否可见:隐藏)
  -webkit-transform-style: preserve-3d; (设置内嵌的元素在3D 空间如何呈现:保留3D )
  position:fixed 固定效果
  Q: 当给指定元素添加position:fixed时首次加载页面完成后,滑动整个网页,添加此样式的元素会跟随页面滚动(目的是固定此元素)。
  A: 解决方案:
  为其元素添加如下css属性即可:-webkit-transform:translate3d(0,0,0)
  备注:此方案不一定有效,需要后续验证或者提供更好的方案
  IOS键盘字母输入,默认首字母大写
  Q: 如题
  A: 解决方案:
  <input type="text" autocapitalize="off" />
  select 下拉选择设置右对齐
  Q: 如题,默认是左对齐,产品有其他需求
  A: 解决方案:
   select option {
  direction: rtl;
  }
  通过transform进行skew变形,rotate旋转会造成出现锯齿现象
  Q: 如题
  A: 解决方案:
   -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
  transform: rotate(-4deg) skew(10deg) translateZ(0);
  outline: 1px solid rgba(255,255,255,0)
  移动端点击延迟
  Q: 如题
  A: 解决方案:引用 fastclick.js
  移动端点透问题
  Q: 如题,当点击绝对定位元素的时候,下面的元素虽然被遮盖,但也被触发了。
  A: 原因是:touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
  解决方案:
  (1)尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
  (2)用fastclick,https://github.com/ftlabs/fastclick
  (3)用preventDefault阻止a标签的click
  (4)延迟一定的时间(300ms+)来处理事件 (不推荐)
  (5)以上一般都能解决,实在不行就换成click事件。
   关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
  Q: 如题
  A: 解决方案:通过正则替换
 this.value = this.value.replace(/\u2006/g, '');
  Retina屏的1px边框
  Q: 如题
  A: 解决方案:
   Element{
  border-width: thin;
  }
  
    相关阅读:移动端常见bug汇总 http://www.51testing.com/html/02/n-4421202.html

      上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号