問題タブ [subpixel]

divの背景位置をゆっくりとアニメーション化しようとしていますが、ぎくしゃくした動きはありません。ここで私の現在の努力の結果を見ることができます：

http://jsfiddle.net/5pVr4/2/

私は何時間もこれに取り組んできましたが、サブピクセルレベルでゆっくりとスムーズにアニメーション化するものを見つけることができません. 私の現在の例は、このページのサンプル コードから作成されました: http://css-tricks.com/parallax-background-css3/

私が求めているアニメーションの滑らかさは、このページの translate() の例で見ることができます:

http://css-tricks.com/tale-of-animation-performance/

background-position で実行できない場合、複数の div で繰り返し背景を偽造し、translate を使用してそれらの div を移動する方法はありますか?

編集:サブピクセル レンダリングについて詳しく読むと、10 進数または部分的なピクセル値になる CSS 値は「ブラウザーに適した」ものではないことがわかりました。したがって、値には小数点以下の桁数を設定する必要があります。

すべての子要素 ​​(.project) の幅を合計して、親要素 (.container) の幅を計算しています。これまでのところ、これを試しましたが、うまくいきません。誰でも私を助けることができますか？

例:それぞれの幅が 363.667px の子要素が 5 つある場合、幅を 364px にしたいと考えています。

HTML マークアップ

jQuery

スプライトを 1 ピクセル遅く移動すると、エッジを除くすべてがサブピクセルで移動します: https://www.youtube.com/watch?v=zcai1PUfzzA&feature=youtu.be許可されていないため、これを行うと思います画像をスケーリングします。画像の端に透明なピクセルを 1 つ追加すると、次のようになります: https://www.youtube.com/watch?v=ovCBpBFj3FU&feature=youtu.beそれから私がしなければならないので、方法は「吸う」-透明なピクセルを削除して見栄えを良くするための配置に関する1 +画像を「2のべき乗」にすることができないため、パフォーマンスドレインです。スケーリングできるようにするにはどうすればよいですか？(それが問題なら?) MonoGame を使用してゲームを作成しています。

次の Sass ルールがあります。

次の css を出力します。

代わりに、このルールを次のようにする必要があります (10 進数の精度は重要ではありません。最後の値が 7 ではなく 6 であることだけです)。これは、サブピクセル レンダリングの問題を解決するためです。

sass 'floor' 関数を使用すると、全体が '16%' に切り捨てられます。Sassで小数点以下の桁数を切り捨てる方法はありますか? これを行うために mixin を使用するのはどうですか? libsass (sass 3.2) を使用しています。

「精度」の調整が機能しません - 最後の値はまだ「7」です。精度だけを変更すると、小数点以下の桁数が切り捨てられるだけです。必要なように、最後の小数点以下を切り捨てません。

コードペン: http://codepen.io/calumbrodie/pen/aOzVga

編集：これを重複としてマークした人は誰でも-これは別の質問です。他の質問は「精度」に関するものですが、これが「精度」に関するものではない理由を明示的に説明しています。私は本当にそれを明確にすることはできません。