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

Question

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

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

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

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

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

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

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

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

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

Answer 1

Я не могу проверить его без доступа к одной из этих машин, но после просмотра вашей страницы я могу сказать с уверенностью на 99%, что проблема на самом деле является частью приведенного ниже правила 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; 
} 

Answer 2

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

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

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

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

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

Answer 3

Вы можете просто ясно все CSS загружен в вашем браузере

CTRL+SHIFT+DELETE 

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

Answer 4

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

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

Answer 5

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

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

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

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

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

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

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