css - Safari 和 FF 的奇数缩放级别中动画 Sprite 的亚像素问题

Question

我有以下 fiddle 提炼了我在一个更大的元素中遇到的问题

http://jsfiddle.net/zhaocnus/6N3v8/

在 Firefox 和 Safari 中，此动画将开始在奇数缩放级别左右产生抖动效果(在 Mac 上使用 Ctrl+/- 或 Cmd+/- 放大/缩小)。我相信这是对亚像素渲染问题以及各种浏览器在缩放计算期间向上或向下舍入像素之间的差异造成的，但我不知道如何解决它并正在寻找任何建议。

我不能使用更现代的 CSS3 动画功能，因为我需要支持 IE7 等旧版浏览器。

(来自下面 fiddle 的代码，没有它似乎无法发布，尽管不确定没有 CSS 和 HTML 是否有意义)

// js spritemap animation
// constants
var COUNTER_MAX = 9,
    OFFSET = -50,
    FRAMERATE = 100;

// variables
var _counter = 0,
    _animElm = document.getElementById('animation'),
    _supportBgPosX = false;

// functions    
function play() {
    // update counter
    _counter++;
    if (_counter > COUNTER_MAX) {
        _counter = 0;
    }

    // show current frame
    if (_supportBgPosX) {
        _animElm.style.backgroundPositionX = (_counter * OFFSET) + 'px';
    } else {
        _animElm.style.backgroundPosition = (_counter * OFFSET) + 'px 0';
    }

    // next frame    
    setTimeout(play, FRAMERATE);
}

// check if browser support backgroundPositionX
if (_animElm.style.backgroundPositionX != undefined) {
    _supportBgPosX = true;
}

// start animation
play();

Answer 1

不是将背景移动到新框架，而是让 Canvas 标签重新绘制框架。 canvas 标签处理独立于浏览器的子像素解释，因此您不仅可以控制渲染(与浏览器无关)，还可以解决抖动问题，因为它被实时地逐帧重新绘制到 Canvas 的尺寸中.

缩放特别困难，因为没有可靠的方法使用 jQuery 或 plain-ole javascript 从浏览器检测缩放级别。

在这里查看演示:http://jsfiddle.net/zhaocnus/Gr9TF/

*感谢我的同事 zhaocnus 的解决方案。我只是代表他回答这个问题。

// js spritemap animation
// constants
var COUNTER_MAX = 14,
    OFFSET = -200,
    FRAMERATE = 100;

// variables
var _counter = 0,
    _sprite = document.getElementById("sprite"),
    _canvas = document.getElementById("anim-canvas"),
    _ctx = _canvas.getContext("2d"),
    _img = null;

// functions    
function play() {
    // update counter
    _counter++;
    if (_counter > COUNTER_MAX) {
        _counter = 0;
    }

    // show current frame
    _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
    _ctx.drawImage(_img, _counter * OFFSET, 0);

    // next frame    
    setTimeout(play, FRAMERATE);
}

function getStyle(oElm, strCssRule) {
    var strValue = '';
    if (document.defaultView && document.defaultView.getComputedStyle) {
        strValue = document.defaultView.getComputedStyle(oElm, null).getPropertyValue(strCssRule);
    } else if (oElm.currentStyle) {
        var strCssRule = strCssRule.replace(_styleRegExp, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return String(strValue);
}

function initCanvas(callback) {
    var url = getStyle(_sprite, 'background-image');
        url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
    _img = new Image();
    _img.onload = function(){
        _ctx.drawImage(_img, 0, 0); 
        callback();
    };
    _img.src = url;
}

// start animation
initCanvas(play);