开发笔记 - 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的时候,有两个条件必须满足:

  1. canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);"
  2. 页面上不得含有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关键字

⚠️ **GitHub.com Fallback** ⚠️