BUG筆記:Android原生瀏覽器不認負百分數margin致Foundation Orbit往右滑動動畫出錯

一看這標題就知道無比蛋疼了是不?至少我歷來不用安卓自帶的瀏覽器。。。

發現這個bug的場景:萬惡的Foundation,它的滾動圖片插件Orbit在安卓自帶瀏覽器下手指從左往右滑動時動畫仍舊錶現爲從右往左滑動。只有在安卓自帶瀏覽器下會發生哦!javascript

罪魁禍首是foundation寫這個插件時候用jQuery的css動畫從'marginLeft':'-100%'到'marginLeft':'0%'來實現從圖片從左往右滑動進來。而這個傻瀏覽器並不認負的百分數,不過能認負的數值。css

同時要注意的是,兩個百分數要同時改爲數值纔有效,也就是說-100px到0%的動畫也會出錯。但100%到0的動畫沒問題。html

如下是修改的代碼截取片斷:java

    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();
            });
        };
    };
相關文章
相關標籤/搜索