Chrome испортил изображения внутри масштабированного элемента с радиусом границы
Я пытаюсь построитьслайд-шоу " Тип приложения. Каждый слайд имеет фиксированное соотношение сторон, но я хочу, чтобы содержимое отображалось с нормальной шириной / высотой - поэтому я пытаюсь использовать CSS3 "преобразования: масштаб» на содержимом слайда, используя ширину / высоту области просмотра, я рассчитываю идеальный масштаб / поля для подгонки слайда к области просмотра. На одном конкретном слайде я показываю некоторыеинформационная карта " для людей и список каждого человека "преемники»
ВОПРОСChrome демонстрирует очень странное поведение на изображениях. Если вы измените размер окна, изображения переместятся повсюду. Если вы заставляете изображение перерисовываться каким-либо образом, оно, кажется, исправляется (т.е. прокручивает страницу вниз и назад)
Редактировать это, кажется, связано конкретно с изображением внутри рамки с радиусом границы!
ВОПРОСЭто ошибка в Chrome? Есть ли какая-нибудь работа, которая исправит эту проблему?
Живой примерВ этом живом примере вы можете изменить размер панели результатов, чтобы масштабировать изображение. По крайней мере, в моей версии Chrome изображение становится бесполезным.
ПОСТ РЕДАКТИРОВАТЬЯ опустил код до минимума, необходимого для воспроизведения проблемы. Я использовал только префиксы поставщика webkit.
Я также обновил описание проблемы, потому что после просмотра кода я понял, что он как-то связан с радиусом границы элемента, содержащего изображение!
HTML
<img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg">
CSSbody {
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);