Background-size: cover error in webkit

Question

It seems to me that there is an error in webkit, probably a rounding problem, which leads to the fact that the background-size property cannot cover all elements of the element when installing cover .

jsFiddle: http://jsfiddle.net/um4cQ/ (try resizing the results pane if you don't see a red background showing left or top left).

I saw some links to a bug on the network, some of them relate to 2011 , but I have not heard anything from the developers. More importantly, if there is a way around CSS (without using javascript).

Has anyone found a viable workaround for this?

Answer 1

I added a vendor prefix and fixed some images, and then grouped the shorthand rule background: for color and without repeating. This captured some of the images, but not all, so I noticed that this was due to the size of the image you have, I used the same image (which worked) for all the images, and it worked.

So the aspect ratio of your images has something here, and I think because background-size: cover; trying not to distort the image, ruining the aspect ratio.

This is where my violin works ... just rework your images so that they have an aspect ratio that would fit its container correctly.