PRZYPADEK UŻYCIA

Próbuję zbudować aplikację typu „pokaz slajdów”. Każdy slajd ma stały współczynnik proporcji, ale chcę, aby zawartość była renderowana z ich normalną szerokością / wysokością - więc próbuję użyć CSS3 „transform: scale” na zawartości slajdu, używając szerokości / wysokości rzutni I oblicz idealną skalę / marginesy, aby dopasować slajd do rzutni. Na jednym konkretnym slajdzie pokazuję „kartę informacyjną” dla ludzi i listę „następców” każdej osoby

KWESTIA

Chrome pokazuje pewne dziwne zachowania na obrazach. Jeśli zmienisz rozmiar okna, obrazy poruszają się po całym miejscu. Jeśli zmusisz obraz do przemalowania się w jakiś sposób, obraz wydaje się sam naprawiać (tzn. Przewijać stronę w dół i cofać)

Edytuj to wydaje się być związane z obrazem wewnątrz pudełka z promieniem granicznym!

PYTANIE

Czy to błąd w Chrome? Czy są jakieś prace, które naprawią ten problem?

PRZYKŁAD NA ŻYWO

Live Fiddle

W tym przykładzie na żywo - możesz zmienić rozmiar okienka wyników, aby spowodować przeskalowanie obrazu. Przynajmniej w mojej wersji chrome obraz robi się hałaśliwy.

POST EDITS

Rozszerzyłem kod do minimum wymaganego do odtworzenia problemu. Użyłem tylko prefiksów dostawców Webkit.

Zaktualizowałem także opis problemu, ponieważ po rozszerzeniu kodu zdałem sobie sprawę, że musi on mieć coś wspólnego z promieniem granicznym elementu zawierającego obraz!

Oryginalne skrzypce

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);