开发笔记 - pingdongyi/blog-2 GitHub Wiki
问题:消除百度浏览器兼容性问题:图片img边框问题
解决方法:
-webkit-transform:translate3d(0,0,0);
position:relative;
z-index:20000;
问题:canvas在小米2的原生浏览器中,由于页面变化或切换select时可以使canvas产生重影,就是说一个图只绘制了一遍,却出现了两个
解决方法:canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);
,如
<div style="overflow:hidden;position: absolute;z-index: 2;">
<div style="position:relative;overflow:visible;-webkit-transform: translateZ(0);">
<canvas class="chart-trend-canvas-main" width="260" height="90"></canvas>
<canvas class="chart-trend-canvas-mask" width="260" height="90"></canvas>
</div>
</div>
问题:canvas在百度浏览器,百度框中会出现双重画图等,就像有一个完全跳出了某个区域
解决方法:在外层div或容器内加上style="overflow:hidden;",如
<div style="overflow:hidden;position: absolute;z-index: 2;">
<div style="position:relative;overflow:visible;-webkit-transform: translateZ(0);">
<canvas class="chart-trend-canvas-main" width="260" height="90"></canvas>
<canvas class="chart-trend-canvas-mask" width="260" height="90"></canvas>
</div>
</div>
问题:Galaxy S4的webview中的canvas绘图有严重bug,无论是fillRect还是drawImage,会把0,0开始的1个像素,绘制到整个canvas,导致画面无法显示。注:此现象只出现在首次页面加载,当第二次进入页面后没有此问题。
解决方法:galaxy s4的webview显示canvas的时候,有两个条件必须满足:
- canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);"
- 页面上不得含有img标签
问题:android4.x中一部分手机,在改变canvas大小的时候有时会卡死。大家可能都知道,重新设定canvas的大小可以实现canvas的完全刷新,但是也会导致一部分4.x手机卡死。
解决方法:用clearRect刷新canvas
问题:在note2的百度框上,如果页面中有select和canvas,点击select切换时,会使canvas上移.
解决方法:
siteselect.on('touchend',function(){
drawLine(datas[curProvider][curChartType]);
});
//绑定select的touchend事件,再次重新绘图在canvas上
问题:在动态绘制页面dom元素时,如div,要先显示出来,才能拿到dom元素真实的宽高等属性,否则在dom元素没有显示时拿到的属性都是错误的,如宽高为0
tip.css('background-color',tipcolor);
tip.html(tipHtml);
tip.show();
var left='',right='';
if(x - Math.round(me_tip.offsetWidth/2)<1){
left='0px';
right='auto';
}else if(x + Math.round(me_tip.offsetWidth/2)>=w){
right='0px';
left='auto';
}else{
left=x - Math.round(me_tip.offsetWidth/2) + 'px';
right='auto';
}
tip.css({'left':left,'right':right});
在频繁解绑一些事件做一些操作时,如:touchmove事件,里面的操作尽量提取出来用一个函数来封装,且用setTimeout()来设置在一定时执行,这样助于减少消耗内存等,否则频繁执行匿名函数会千万操作比较卡。如在touchmove事件时用canvas画图时:
/*绑定鼠标移动事件*/
var x=0,y=0,st,mt,et;
$(me_map).off('touchstart touchmove touchend');
$(me_map).on('touchstart', function(e){
clearTimeout(st);
clearTimeout(mt);
clearTimeout(et);
var obj=e.touches[0];
x=obj.pageX;
y=obj.pageY;
var mapOffset = getOffset(me_map); /*获取鼠标坐标*/
var crood = {x: (obj.pageX || (obj.clientX + document.documentElement.scrollLeft)) - mapOffset.left, y: (obj.pageY || (obj.clientY + document.documentElement.scrollTop)) - mapOffset.top};
var closest = getClosest(crood.x, pxMap); /*找出距离鼠标坐标最近的点*/
/*画竖线*/
if(crood.x >= pxMap[0]['x'] && crood.x <= pxMap[pxMap.length-1]['x']){
st=setTimeout(function(){
drawMaskLayer(closest)},1);
}
});
$(me_map).on('touchmove',function(e){
clearTimeout(st);
clearTimeout(mt);
clearTimeout(et);
var obj=e.touches[0];
var mapOffset = getOffset(me_map); /*获取鼠标坐标*/
var crood = {x: (obj.pageX || (obj.clientX + document.documentElement.scrollLeft)) - mapOffset.left, y: (obj.pageY || (obj.clientY + document.documentElemen
t.scrollTop)) - mapOffset.top};
var closest = getClosest(crood.x, pxMap); /*找出距离鼠标坐标最近的点*/
/*画竖线*/
if(crood.x >= pxMap[0]['x'] && crood.x <= pxMap[pxMap.length-1]['x']){
mt=setTimeout(function(){
drawMaskLayer(closest)},
1);
}else{
et=setTimeout(function(){
mskctx.clearRect(0, 0, mask.width, mask.height);
tip.hide();
},5);
}
if(Math.abs(obj.pageX-x)>Math.abs(obj.pageY-y)){
e.preventDefault();
return false;
}
});
/*鼠标移走事件*/
$(me_map).on('touchend', function(e){
clearTimeout(st);
clearTimeout(mt);
clearTimeout(et);
et=setTimeout(function(){
mskctx.clearRect(0, 0, mask.width, mask.height);
tip.hide();
},5);
});
问题:在nexus 5 百度浏览器中canvas出现点击态问题
解决方法:在canvas外层div上加-webkit-tap-highlight-color:rgba(0,0,0,0);
在UC浏览器上上下滑动屏幕会触发resize事件,如:
/*布局改变时重新初始化*/
var ww=$(window).width();
$(window).on('orientationchange resize',function(){
var less=Math.abs($(window).width()-ww);
ww=$(window).width();
if(less>3 && datas[curProvider] && datas[curProvider][curChartType]){
drawLine(datas[curProvider][curChartType]);
}
});
这里是在屏幕改变时重新画图,这里的方法是判断屏幕宽度变化大于3时才重绘
问题:div在页面上滑动时会出现滑动的痕迹
解决方法:
-webkit-transform:translate3d(0,0,0);
overflow: hidden;
问题:在ipod上在横竖屏切换时,对canvas重新画图,但canvas有时会不显示,要稍微触动下才会显示
解决方法:在横竖屏切换重新画图时设一setTimeout();如:
var ret=null;
$(window).on('orientationchange resize',function(){
var less=Math.abs($(window).width()-ww);
ww=$(window).width();
if(less>3 && datas[curProvider] && datas[curProvider][curChartType]){
clearTip();
clearTimeout(ret);
setTimeout(function(){
drawLine(datas[curProvider][curChartType]);
},1);
}
});
问题:小米3自带浏览器会把页面中有main关键字的页面作为广告过滤掉,如果在没有关闭过滤广告功能时,
修复方法:替换所有main关键字