web移动端常见BUG2
来源:互联网 发布:38周胎儿发育标准数据 编辑:程序博客网 时间:2024/06/05 21:52
1.固定定位将失效
2.层级z-index问题
3.display:none 导致 transition失效
5.input 点击出现键盘时 bug
6. border-radius overflow:hidden 子元素隐藏不了
父级元素加上-webkit-transform-style:preserve-3d; 或者 -webkit-transform: rotate(0deg);能够解决苹果手机的问题,但是安卓手机子元素还是隐藏不了
7 微信长按二维码识别不了(微信保存图片同理)
10 animation-fill-mode:both在安卓会导致页面默认滚动条闪烁
问题描述: 父级元素用了-webkit-transform属性后,所有子元素的固定定位将失效
解决办法:把所有固定定位的元素放到最外层统一管理 或者 -webkit-transform:auto;
(*-webkit-transform-style:preserve-3d;一定要加在需要进行3D转换元素的直接父级,否则会出现层级问题*)
移动端-webkit-transform:translateZ(100px)的层级高于z-index,如果想到定位元素(a)浮于3D元素(b)之上,可以对a元素加上-webkit-transform:translateZ(100px),但是a元素的所有父级不要有-webkit-transform-style:preserve-3d否则a元素会错位;
使用visibility:visible/hidden 替换display:block/none
或者
用-webkit-animation代替transition
4.input:disabled苹果上面会加上透明度
.inpSty input:disabled {color:rgba(255,255,255,0.9);opacity:1;}//苹果手机默认会加上透明度
问题描述:安卓 点击 input 出现键盘的时候,100%布局的页面的高度会发生变化,导致页面布局错乱
解决办法 1. .wrapper 加上最小高度 min-height:415; (注意有时候最小高度会失效,对input的最外层position加上绝对定位)
2. 如果还是有问题 直接对 input的外层加上最小高度
父级元素加上-webkit-transform-style:preserve-3d; 或者 -webkit-transform: rotate(0deg);能够解决苹果手机的问题,但是安卓手机子元素还是隐藏不了
解决办法:.qrcode{padding-top: 200px !important;margin-top: -200px !important;position: relative;z-index: 100;-webkit-user-select: none;} 对二维码图片添加qrcode样式
问题描述:
1.可识别区域比正常地方稍微往上一点(微信标题栏+系统状态栏的高度(64px)),如果网站采用了 viewport(640) 缩放,那么可识别区域偏上的高度差不多200
2.微信长按二维码可以能导致手机内存泄露,手机变卡,css3动画出不来(解决办法:退出微信进程,过2分钟之后进入微信)
8 animation动画失效
问题原因:
1.添加动画的元素必须为块级元素,行内元素需要转车块级元素或者添加绝对定位,伪类(:before :after)不能添加动画
2.动画的每个阶段的属性(-webkit-transform)要保持一致
如下这种正确
@-webkit-keyframes push{
0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}
20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}
100%{-webkit-transform:scale(0) translate(0,-100px);opacity:0;}
}
如下这种错误
@-webkit-keyframes push{
0%{-webkit-transform:scale(0) translate(0,0);opacity:0;}
20%{-webkit-transform:scale(1) translate(0,0);opacity:1;}
100%{-webkit-transform: translate(0,-100px);opacity:0;} /*缺少scale(0)*/
}
9 微信浏览器音乐播放失败
问题描述:
9 animation动画在安卓卡顿 如果页面上面有背景音乐和特效音乐,背景音乐准备播放之前(canplay 没触发之前)同时加载特效音乐会导致背景音乐不能正常的播放
(背景音乐和特效音乐一起加载会导致背景音乐播放不了)
解决办法:
等待背景音乐 canplay 或者 canplaythrough 之后在加载特效音乐
问题原因:
js添加class给元素添加animation动画在安卓上动画会出现卡顿和延迟
解决办法
1.事先在css里面为元素添加好animation动画,隐藏元素,然后用js控制元素显示
2.js添加class给元素添加transition动画
问题原因
.pagebox{-webkit-animation: fadeIn 0.5s ease 0s both;z-index:2;} 在安卓下.pagebox 子集元素默认滚动条会导致.pagebox闪烁 (animation-fill-mode:both和z-index同时存在才会有这个问题)
解决办法
.pagebox{-webkit-animation: fadeIn 0.5s ease 0s;z-index:2;}去掉both
阅读全文
0 0
- web移动端常见BUG2
- web移动端常见BUG
- bug2
- Bug2
- 40条常见的移动端Web页面问题解决方案
- 常见的移动端和web的问题锦集
- 40条常见的移动端Web页面问题解决方案
- 40条常见的移动端Web页面问题解决方案
- 40条常见的移动端Web页面问题解决方案
- 40条常见的移动端Web页面问题解决方案
- 40条常见的移动端Web页面问题解决方案
- 移动web前端开发之常见bug
- 移动App中常见的Web漏洞
- 常见的移动web开发的问题
- [SMOJ2095]Bug2
- 倾力总结40条常见的移动端Web页面问题解决方案
- 倾力总结40条常见的移动端Web页面问题解决方案
- 倾力总结40条常见的移动端Web页面问题解决方案
- 《The Docker Book》NodeJS Dockerfile
- 1100: 求组合数(函数专题)
- Spring 注解学习笔记
- 使用Json设置网页省份与城市的级联查询
- [问题解决]Android中getDrawable和getColor过时的替代方法
- web移动端常见BUG2
- 零基础通过SugarNMS实现服务器监控
- 史上最简单的SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)
- 关于VS中的错误处理和调试
- 42. Trapping Rain Water
- lambda expressions are not supported at this language level错误
- js正则表达式的使用详解
- 股票交易手续费标准
- 敲诈不成,IT约聘人员把企业网站流量导至色情网站