6

使用事例

「スライドショー」タイプのアプリケーションを作成しようとしています。各スライドのアスペクト比は固定されていますが、コンテンツを通常の幅/高さでレンダリングしたいので、ビューポートの幅/高さを使用して、スライドのコンテンツにCSS3「transform：scale」を使用しようとしています。スライドをビューポートに合わせるための理想的なスケール/マージンを計算します。ある特定のスライドで、私は人々のためのいくつかの「情報カード」と各人の「後継者」のリストを示しています

問題

Chromeは、画像上で非常に奇妙な動作を示しています。ウィンドウのサイズを変更すると、画像はあちこちに移動します。なんらかの方法で画像を強制的に再描画すると、画像は自動的に修正されるように見えます（つまり、ページを下にスクロールして上に戻る）

これを編集すると、境界線の半径のあるボックス内の画像に特に関連しているようです。

質問

これはChromeのバグですか？この問題を解決する回避策はありますか？

実例

ライブフィドル

このライブの例では、結果ペインのサイズを変更して、画像を拡大縮小することができます。少なくとも私のバージョンのクロームでは、画像は混乱します。

投稿編集

問題を再現するために必要な最小限のコードまでコードをいじりました。Webkitベンダーのプレフィックスのみを使用しました。

また、問題の説明を更新しました。コードをいじった後、画像を含む要素の境界半径と関係があるはずだと気付いたからです。

オリジナルフィドル

HTML

<div class="container">
    <div class="inner">
        <div class="box">
            <img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg"/>
        </div>
    </div>
</div>

CSS

body {
    background-color: black;
}

.inner {
    background-color: white;
    width: 800px;
    height: 600px;
    -webkit-transform-origin: 0 0;
}

.box {
    overflow: hidden;
    -webkit-border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 10px;
}

JAVASCRIPT

(function ($) {
    var $inner = $('.inner');
    var $window = $(window);
    var iWidth = parseInt($inner.css('width'));
    var iHeight = parseInt($inner.css('height'));
    var iRatio = iWidth / iHeight;

    function adjustScale() {
        var vWidth = $window.width();
        var vHeight = $window.height();
        if (vWidth / vHeight > iRatio) {
            width = vHeight * iRatio;
        } else {
            width = vWidth;
        }
        var scale = width / iWidth;
        $inner[0].style.WebkitTransform = 'scale(' + scale + ')';
    }

    adjustScale();
    $window.resize(adjustScale);
})(jQuery);
4

1 に答える 1

3

これは、ここで除算を実行しているために発生しています

var scale = width / iWidth;

これは、小数点以下の桁数が多い数値を示しています。

この数値をで使用するとCSS3 Transform - Scale()、エンジンは長い計算を実行するように強制されますが、これはChrome;によって適切に処理されていないようです。

次に+1すると、CSSエンジンの欠陥が発見された可能性がありChromeます。

記録のために：どうやら、Chromeは2つの10進数から問題を抱え始めています：

// Bad
var scale = (width / iWidth).toFixed(2);

（ない）動作するデモ：http：//jsfiddle.net/VPZqA/1/

バグレポートを開いて@ Googleください。

解決：

これを防ぐには、次のように、値を1つの10進数に丸めるだけです。

// Right
var scale = (width / iWidth).toFixed(1);

作業デモ： http： //jsfiddle.net/VPZqA/

このようにすると、数学の精度は低下しますが、おそらく目立たないでしょう。

お役に立てば幸い

于 2013-03-08T13:46:02.643 に答える