Static background-image "pulsates" rapidly - very strange

Question

This is the weirdest thing I've ever seen.

I have a class of div that has a background-image, defined as such:

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

You can see the divs here: Rouvou.com/fiction. They're called .circle-blue or .circle-red and both classes behave identically.

So here's where it gets weird: on a Lenovo ThinkCentre machine with a ThinkVision monitor, using Firefox, they "pulsate" rapidly, or grow by a pixel in width and height rightwards and downwards, and then shrink again, very rapidly, like a flicker.

Since the Lenovo is a school computer with only two browsers installed, the only other browser I could test it on was IE, in which this behavior was not found. I wish I could post video here to show it, but here's a screenshot of one of the divs:

I've tested it on almost every browser on many other types of machines, and the only place I've ever found this behavior was Firefox on a Lenovo ThinkCentre, with a ThinkVision monitor. I also tested like 20 different ThinkCentres, and this error displayed on every single one.

Has anyone run into anything like this before? What could possibly be causing it? Can anyone at least reproduce the problem on their machine/browser?

I'm using Firefox 31.0, if that matters.

Answer 1

I cannot test it without access to one of these machines, but after looking at your page, I can say with 99% certainty that the issue is actually the background-size: contain part of the rule below. Firefox was only beginning to support that with that browser version, and it may have still been a bit buggy. (http://caniuse.com/#feat=background-img-opts) The other thing that leads me to believe this is the case is when that rule is not applied, the background image expands to the right and down as you described.

The fix, since the size of these dots do not change when re-sizing the page, would be to re-size the image manually in Gimp or Photoshop to the correct size, and not try to do it on the fly. This little cleanup will make a minor improvement overall loading/rendering of the page as well.

If you do need the image to resize, your options are using an img tag with a width: 100%; height: auto and overlaying the text over the top, or making a larger image that just has the two-tone colors and the horizontal slash. I would probably just make this all a square image, then add that as the background-image with the position set at center/center (to keep the slash in the correct spot if you need to resize) and set a border-radius on the div to 50% of the div size, making it once again, a circle.

#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

I believe it's just the version of Firefox you are running. For example I had trouble with HTML 5 validation with Firefox. The version of Firefox with the graphical error was 22.0, when I viewed the same thing on my laptop, using version 38.0.1, it was in the correct place. I think Firefox was just slower to implement certain things and had no way of accomplishing certain aspects without updating the browser.

I think that the same thing is happening in your scenario. Whereby those images are stylised in such a way that your version of Firefox does not fully support; it tries it's best to show them to you but just can't do it properly.

I tested several of the css properties by going on respective w3schools pages and the only style that seemed to have any sort of graphical error was background-size:contain. However, this only happens on an even earlier version of Firefox, which may not be the same as the one you are running.

I went on this Firefox website and it says that you need:

a browser that supports scaling background images (such as Firefox 3.6 or later)

to use background-size:contain;.

Final answer: your version of Firefox does not fully support background-size:contain; so there are some visual errors.

Answer 3

Just a thought, don't know if it'll help since I can't test it on my machine but have you tried setting max-width and max-height on your divs? On inspecting them they only have width and height set.

Try setting them to the same width and height:

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

You could also try setting the min-height and min-width:

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

Answer 4

The images are originally 72x72, and you make the browser downscale them to 57x57, yet the GPU might correct the scaling to fit even boundaries (depending on the graphic card your machines have). If so, the rescaling might cause the parent element to resize in order to fit its contents (as you haven't specified the overflow behavior), which will in turn cause a recalculation of the contained element.

Solution: Render the background image as 57x57 taking into account that it will be even rounded, or - preferable if you can - render it as 56x56. You will also make the CSS a bit lighter :)

Answer 5

Can you just clear all the CSS loaded in your browser

 CTRL+SHIFT+DELETE

I have a feeling too that there's more than one CSS files pointing to id of the div. You may also update your browser.