开发笔记 - 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关键字