1

私は、より大きなプロジェクトで抱えている問題を抽出する次のフィドルを持っています

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

Firefox と Safari では、このアニメーションは奇数のズーム レベル (Mac では Ctrl+/- または Cmd+/- を使用してズームイン/アウト) で左右にジッタリング効果を持ち始めます。これは、サブピクセル レンダリングの問題と、さまざまなブラウザーの違いにより、ズームの計算中にピクセルが切り上げられたり切り下げられたりするためだと思いますが、修正方法がわからず、提案を探しています。

IE7 などのレガシー ブラウザーをサポートする必要があるため、最新の CSS3 アニメーション機能を使用できません。

（以下のフィドルのコードは、それなしでは投稿できないようですが、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();
4

1 に答える 1