移动页面排坑BUG汇总

时间 2019-12-12

标签移动页面 bug 汇总栏目无线繁體版

原文原文链接

## video标签脱离文档流

问题描述：标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流html

测试环境：部分android机型android

解决办法：不使用transform属性。translate用top、margin等属性替代web

## ::after在手机中使用animation无效

问题描述：::after在手机不支持animationcanvas

解决办法：不用伪元素改成普通元素浏览器

## 页面高度渲染错误

问题描述：页面100%高度包含地址栏高度，当地址栏存在时，会部份内容被隐藏缓存

环境与频率：常常性出现;各移动浏览器微信

解决办法：重置<html>ide

高度：document.documentElement.style.height = window.innerHeight + 'px'函数

## 叠加区高亮

问题描述：使用click也会出现绑定点击区域闪一下的状况布局

环境与频率：部分android机型

解决办法：给该元素一个样式 -webkit-tap-highlight-color:Ωrgba(0,0,0,0);

## 事件没法被触发

问题描述：focus、touch、click等事件均无效

环境与频率：android微信部分机型

解决办法：该元素其CSS属性里增长 -webkit-transform: translate3d(0,0,0)

## :active 效果不兼容

问题描述：CSS active伪类无效

环境与频率：android 4.2如下

解决办法：该元素的touch系列的事件绑定一个空匿名方法

   element.addEventListener('touchstart',function(){},false);

## 浏览器崩溃

问题描述：解绑函数写在了事件处理中致使微信崩溃

环境与频率：小米微信

解决办法：解绑事件不要写在事件处理中

## 预加载与自动播放无效

问题描述：audio的preload、autoplay 没法直接起效环境与频率：受操做系统、浏览器（webview）、版本等影响

解决办法：捕捉一次用户输入后，让音频加载实现预加载

   //play and pause it once
   document.addEventListener('touchstart', function () {
   document.getElementsByTagName('audio')[0].play();
   document.getElementsByTagName('audio')[0].pause();
   });

## 没法同时播放多音频

问题描述：播放后一音频会打断前一音频，而不会同步播

环境与频率：android

解决办法：合理降权与选择不一样的音频，不一样音频营造尽可能一致的氛围。

## 不支持局部滚动

问题描述：除body(html)元素外 overflow:scroll 无效

环境与频率：android 2.X

解决办法：一、巧用布局利用body(html)全局滚动二、iscroll、自写js控制translate、scrollTop模拟

## input:password 密码输入框出现悬浮怪异输入框

问题描述：怪异悬浮的表单

环境与频率：部分android机型

解决办法：使用input:text类型而非password类型，并设置其设置 -webkit-text-security: disc; 隐藏输入密码从而解决

## 初始化页面时获取不到宽高

问题描述：内嵌浏览器的ready跟咱们jq或者zoto提供的方法不同，不通用

测试环境：内嵌浏览器

解决办法：

var inter=setInterval(function(){
    if ($win.width()){
        //你的代码
        clearInterval(inter);
    }
},10);

## 不一样单位在手机端不能用

问题描述：如100%在手机端展示不一致

测试环境：/

解决办法：100% -> 100px

## webkit与标准颜色渐变方向相差90度

问题描述：webkit与标准颜色渐变方向相差90度 background:-webkit-linear-gradient(0deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%,#3d86c8);background:linear-gradient(90deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%, #3d86c8);

测试环境：/

## flexbox子元素settimeout不渲染

问题描述：flexbox子元素settimeout不渲染

测试环境：/

解决办法：/

## 子元素水平浮动 height:100% 计算有误

问题描述：子元素水平浮动 height:100% 计算有误

测试环境：QQ浏览器

解决办法：/

## canvas toDataURL导出数据失败

问题描述：canvas toDataURL导出数据失败

测试环境：QQ浏览器

解决办法：/

## touchmove阻止冒泡，底层元素touchend也不会执行

问题描述：touchmove阻止冒泡，底层元素touchend也不会执行

测试环境：/

解决办法：/

## QQ浏览器引入js文件缓存

问题描述： QQ浏览器引入js文件缓存

测试环境：android QQ浏览器

解决办法：/