Wap站Bug小结

发表于:2015-7-09 11:41

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

 作者:蜡笔不小心    来源:51Testing软件测试网采编

  问题一:
  应用css3 translate3d 平移效果后的标签元素,在ios上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象
  解决方法:
  1.可在其子元素统一添加和其相同的属性
  2.在其自身添加webkit-backface-visibility:hidden属性。(webkit-backface-visibility:hidden为隐藏被旋转的 div 元素的背面)
  问题二:
  使用touch事件时,android和iOS对touchend事件的响应处理方式不一致。比如:在a标签上使用touchend触发一个弹层显示,在android的浏览器上a标签上实现滑动手指操作,手指离开后,不会触发touchend事件,同样的操作在iOS上则会触发touchend事件。
  解决方法:
var isSlide = false;
$("a").bind("touchstart",function(){
isSlide = false;
});
$("a").bind("touchmove",function(){
isSlide = true;
});
$("a").bind("touchend",function(){
if(isSlide) return;
});
  问题三:
  iOS修复了 css position:fixed 1像素抖动的bug,不过却引出了另一个bug,当给某元素添加position:fixed属性,在首次加载页面的时候此元素会随着页面的滚动而滚动。
  解决方法:
  为此元素添加-webkit-transform:translate3d(0,0,0)属性即可
  问题四:
  在WAP下,常常会用到disply:table这个属性,当容器显示为table之后里面的元素会以表格的形式呈现,当有列是多行而有的是一行的时候在有些手机下一行的部分会以多行多形式呈现。问题的原因在哪里还不确定,但是解决方法找到列,给不要换行的部分加一个word-break: break-all属性即可。
  问题五:
  placeholder在某些低端安卓手机上设置了text-align:right无效。
  解决方法:
  在input::input-placeholder里设置direction:rtl,可以达到文本text-align:right的效果。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

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

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

沪ICP备05003035号

沪公网安备 31010102002173号