Блог

У меня есть изображение, которое я масштабирую, чтобы использовать в качестве фона с другим изображением в div, расположенным поверх него, как таковое:

 <div class="item">
    <img class="item_frame" src="...">
    <div class="item_contents">
        <img src="...">
    </div>
</div>
  

Jsfiddles :

• Демонстрация ошибки CSS
• Демонстрация Jquery — такое же поведение после манипуляций с dom

В webkit broswers я вижу очень странный рендеринг, когда фоновое изображение смещено и, кажется, плавает за пределами родительского контейнера. Если я щелкаю правой кнопкой мыши, чтобы проверить элемент, браузер переходит и соответствующим образом перерисовывает элементы.

• Win64 Firefox 3.6.3 глючит
• Win64 Chrome 15.x глючит
• Win64 IE9… на самом деле это единственный браузер, который отображает это правильно

Разметка здесь в любом случае довольно сложная для динамической загрузки / изменения размера / обрезки изображений, поэтому у меня есть несколько идей о других способах обойти это, которые я могу попробовать.

Я что-то упускаю или это ошибка webkit?

Не уверен, что это ошибка; но вы можете попробовать добавить значения left и top в css-стиль .item_frame, чтобы исправить это:

 .item_frame {
    top: 0;
    left: 0;
}
  

Обновлена CSS-скрипка:http://jsfiddle.net/h7Tqa/7

Обновлен jQuery Fiddle:http://jsfiddle.net/h7Tqa/8

Надеюсь, это поможет!