Статическое фоновое изображение "пульсирует" быстро - очень странно

Это самая странная вещь, которую я когда-либо видел.

У меня есть класс div, который имеет фоновое изображение, определенное как таковое:

background-image: url("circle.png")
background-size: contain

Здесь вы можете увидеть divs: Rouvou.com/fiction. Они называются .circle-blue или .circle-red, и оба класса ведут себя одинаково.

Итак, здесь, где это странно: на машине Lenovo ThinkCentre с монитором ThinkVision, используя Firefox, они "пульсируют" быстро или растут по ширине и высоте пикселя вправо и вниз, а затем сжимаются снова, очень быстро, как мерцание.

Так как Lenovo - это школьный компьютер с установленным только двумя браузерами, единственным браузером, на котором я мог проверить его, был IE, в котором это поведение не было найдено. Я бы хотел опубликовать видео здесь, чтобы показать его, но вот скриншот одного из div:

Я тестировал его почти на каждом браузере на многих других машинах, и единственным местом, где я когда-либо находил это поведение, был Firefox в Lenovo ThinkCentre с монитором ThinkVision. Я также тестировал, как 20 различных ThinkCentres, и эта ошибка отображалась на каждом из них.

Кто-нибудь сталкивался с чем-то подобным раньше? Что может быть причиной этого? Может ли кто-нибудь хотя бы воспроизвести проблему на своем компьютере/браузере?

Я использую Firefox 31.0, если это имеет значение.

Ответ 1

Я не могу проверить его без доступа к одной из этих машин, но после просмотра вашей страницы я могу с уверенностью сказать, что проблема на самом деле является частью background-size: contain правила ниже. Firefox только начал поддерживать это с помощью этой версии браузера, и он, возможно, все еще был немного ошибкой. (http://caniuse.com/#feat=background-img-opts) Другая вещь, которая заставляет меня поверить в это, - это случай, когда это правило не применяется, фоновое изображение расширяется вправо и вниз, как вы описали.

Исправление, поскольку размер этих точек не изменяется при повторной калибровке страницы, было бы изменить размер изображения вручную в Gimp или Photoshop до нужного размера, а не пытаться делать это на лету. Эта небольшая очистка сделает небольшое улучшение общей загрузки и рендеринга страницы.

Если вам нужно изменить размер изображения, ваши параметры используют тэг img с тегом width: 100%; height: auto и накладывают текст поверх него или делают большее изображение, которое имеет только двухцветные цвета и горизонтальный слэш. Я бы просто сделал это все квадратное изображение, а затем добавлю это как background-image с позицией, установленной в центре/центре (чтобы сохранить косую черту в нужном месте, если вам нужно изменить размер) и установите border-radius на div до 50% от размера div, делая его еще раз, круг.

#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
  display: inline-block;
  position: absolute;
  width: 57px;
  height: 57px;
  background-size: contain;
}

Ответ 2

Я считаю, что это только версия Firefox, в которой вы работаете. Например, я имел проблемы с проверкой HTML 5 с Firefox. Версия Firefox с графической ошибкой была 22,0, когда я просматривал то же самое на своем ноутбуке, используя версию 38.0.1, это было в правильном месте. Я думаю, что Firefox был медленнее реализовывать определенные вещи и не имел возможности выполнить некоторые аспекты без обновления браузера.

Я думаю, что то же самое происходит в вашем сценарии. Эти изображения стилизованы таким образом, что ваша версия Firefox не полностью поддерживает; он пытается лучше показать их вам, но просто не может сделать это правильно.

Я тестировал несколько свойств css, перейдя на соответствующие страницы w3schools, и единственный стиль, который, казалось, имел любую графическую ошибку, был background-size:contain. Однако это происходит только в более ранней версии Firefox, которая может отличаться от той, которую вы используете.

Я пошел на этот веб-сайт Firefox, и он говорит, что вам нужно:

браузер, который поддерживает масштабирование фоновых изображений (например, Firefox 3.6 или новее)

использовать background-size:contain;.

Окончательный ответ: ваша версия Firefox не поддерживает полностью background-size:contain;, поэтому есть некоторые визуальные ошибки.

Ответ 3

Просто подумайте, не знаю, поможет ли это, так как я не могу ее протестировать на своей машине, но попробовал ли вы установить max-width и max-height в своих divs? При их проверке они имеют только width и height.

Попробуйте установить их с одинаковой шириной и высотой:

max-width: 57px;
max-height: 57px;

Вы также можете попробовать установить min-height и min-width:

min-width: 57px;
min-height: 57px;

Ответ 4

Изображения первоначально 72x72, и вы делаете браузер уменьшающим их до 57x57, но графический процессор может скорректировать масштаб, чтобы он соответствовал четным границам (в зависимости от графической карты, имеющейся у ваших компьютеров). Если это так, изменение масштаба может привести к изменению размера родительского элемента, чтобы соответствовать его содержимому (поскольку вы не указали поведение переполнения), что, в свою очередь, приведет к пересчету содержащегося элемента.

Решение. Сделайте фоновое изображение как 57x57 с учетом того, что оно будет округлено, или - предпочтительнее, если вы можете - сделать его как 56x56. Вы также сделаете CSS немного легче:)

Ответ 5

Вы можете просто очистить все CSS, загруженные в ваш браузер.

 CTRL+SHIFT+DELETE

У меня тоже есть ощущение, что есть более одного файла CSS, указывающего на id div. Вы также можете обновить свой браузер.