Chrome испортил изображения внутри масштабированного элемента с радиусом границы

Случай использования

Я пытаюсь построитьслайд-шоу " Тип приложения. Каждый слайд имеет фиксированное соотношение сторон, но я хочу, чтобы содержимое отображалось с нормальной шириной / высотой - поэтому я пытаюсь использовать CSS3 "преобразования: масштаб» на содержимом слайда, используя ширину / высоту области просмотра, я рассчитываю идеальный масштаб / поля для подгонки слайда к области просмотра. На одном конкретном слайде я показываю некоторыеинформационная карта " для людей и список каждого человека "преемники»

ВОПРОС

Chrome демонстрирует очень странное поведение на изображениях. Если вы измените размер окна, изображения переместятся повсюду. Если вы заставляете изображение перерисовываться каким-либо образом, оно, кажется, исправляется (т.е. прокручивает страницу вниз и назад)

Редактировать это, кажется, связано конкретно с изображением внутри рамки с радиусом границы!

ВОПРОС

Это ошибка в Chrome? Есть ли какая-нибудь работа, которая исправит эту проблему?

Живой пример

Живая скрипка

В этом живом примере вы можете изменить размер панели результатов, чтобы масштабировать изображение. По крайней мере, в моей версии Chrome изображение становится бесполезным.

ПОСТ РЕДАКТИРОВАТЬ

Я опустил код до минимума, необходимого для воспроизведения проблемы. Я использовал только префиксы поставщика webkit.

Я также обновил описание проблемы, потому что после просмотра кода я понял, что он как-то связан с радиусом границы элемента, содержащего изображение!

Оригинальная скрипка

HTML

    
        
            <img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg">
        
    

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

Ответы на вопрос(1)

Ваш ответ на вопрос