Ошибка абсолютного позиционирования Webkit CSS? - PullRequest
Новая
       6

Ошибка абсолютного позиционирования Webkit CSS?

1 голос
/ 12 ноября 2011

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

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

Jsfiddles:

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

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

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

Я что-то упустил или это ошибка веб-набора?

1 Ответ

3 голосов
/ 12 ноября 2011

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

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

Обновлено CSS Fiddle: http://jsfiddle.net/h7Tqa/7/

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

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

...