BUG笔记：Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错

浏览数：22 / 时间：2015年06月11日

一看这标题就知道无比蛋疼了是不？至少我从来不用安卓自带的浏览器。。。

发现这个bug的场景：万恶的Foundation，它的滚动图片插件Orbit在安卓自带浏览器下手指从左往右滑动时动画仍旧表现为从右往左滑动。只有在安卓自带浏览器下会发生哦！

罪魁祸首是foundation写这个插件时候用jQuery的css动画从‘marginLeft‘:‘-100%‘到‘marginLeft‘:‘0%‘来实现从图片从左往右滑动进来。而这个傻浏览器并不认负的百分数，不过能认负的数值。

同时要注意的是，两个百分数要同时改成数值才有效，也就是说-100px到0%的动画也会出错。但100%到0的动画没问题。

以下是修改的代码截取片段：

var 
SlideAnimation = function 
(settings, container) {
    var 
duration = settings.animation_speed;
    var 
is_rtl = ($(‘html[dir=rtl]‘).length === 1);
    var 
margin = is_rtl ? ‘marginRight‘ 
: ‘marginLeft‘;
    var 
animMargin = {};
    //修改前：animMargin[margin] = ‘0%‘;
    animMargin[margin] = ‘0‘;
 
    this.next = function 
(current, next, callback) {
        next.animate(animMargin, duration, ‘linear‘, function 
() {
            current.css(margin, ‘100%‘);
            callback();
        });
    };
 
    this.prev = function 
(current, prev, callback) {
        //修改前： prev.css(margin, ‘-100%‘);
        prev.css(margin, -prev.width());
        prev.animate(animMargin, duration, ‘linear‘, function 
() {
            current.css(margin, ‘100%‘);
            callback();
        });
    };
};