Смещение по центру блока после CSS-перехода с масштабным преобразованием во всех браузерах (я сдаюсь)

Question

Ссылка на подробную обработку:

Сдвиг изображения / переход после эффекта перехода CSS с масштабным преобразованием в Firefox

Я перепробовал все, что там предлагалось, но я все еще получаю правое смещение моего центрированного блока после того, как эффект перехода CSS завершен.

Кстати, мне действительно нужно transform:scale потому что я называю это в моем коде события изменения размера; Я не могу позволить себе время перерисовать контекст холста во время onresize,

Критический CSS:

#container {
    display:   block;

    margin:    0 auto;
    width:     30.00em;
    height:    22.50em;

    border:    0.30em solid #cd853f;

    overflow:  hidden;
}

В другом месте в моем $(window).bind('resize', function() {...} позвони, у меня есть:

theContainer.css("-webkit-transform", "scale(" + theScale + ", " + theScale + ")");

вместе с соответствующими префиксами для других браузеров.

Просто добавил мой первый jsFiddle ( http://jsfiddle.net/johnlove/yL2td3r2/)... когда вы уменьшаете размер окна по горизонтали, вы правильно видите масштаб граничного изображения. Но при дальнейшем уменьшении окна изображение с рамкой продолжает масштабироваться правильно, но вы также видите, что изображение с рамкой сдвигается вправо. ???

ИЗДАНО: 1 октября и 6 октября

Попытка поставить вышеупомянутое скольжение вправо другими словами... кажется, что каким-то образом ширина окна ошибочно вычисляется, чтобы быть больше, чем она... граничное изображение масштабируется правильно, но с неправильным (большим) окном ширина, граничное изображение скользит или сдвигается вправо, потому что CSS-код DOM центрирует его.

Во всяком случае, это мои впечатления, FWIW.

Я нахожусь в точке, где я отказываюсь от этого для нескольких браузеров. Я пытался с помощью transform: translate and scale together с нулевым успехом.

Answer 1

Анализируя ваш JSFiddle, я попытался получить тот же результат с другим подходом. Я чувствую, что использование масштабных преобразований может быть не лучшим ответом, поэтому я попытался использовать только max-width и удалить javascript.

Если вам нужна специальная обработка для маленьких экранов, вы можете рассмотреть возможность использования медиа-запросов

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Новый CSS:

/* #container ul li img */
 #container {
    margin: 0 auto;
    width: 30.00em;
    max-width: 90%;
    border: 0.30em solid #cd853f;
    overflow: hidden;
}
#container > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#container img {
    /* match specs to #container */
    width: 100%;
    vertical-align: middle;
}

JSFiddle: http://jsfiddle.net/cv42bk0q/1/

Я надеюсь, что это помогает.

Ps.: Если возможно решить проблему, используя только CSS, я настоятельно рекомендую вам сделать это, так как код становится чище, и браузер рассчитывает все для вас, сокращая количество ошибок и повышая производительность.