Is Opera mishandling background-position and/or background-size with percentage values?

Question

I am attempting to use a background image as a sprite, on elements with variable dimensions. I am therefore using percentage based values for background-size and background-position .

I have encountered a problem with this in Opera (latest version, 12.14). I suspect it is the combination of background-position and background-size with percentage based values which is causing the misbehaviour. I have searched in vain for any relevant information, or an acknowledged issue.

To demonstrate the issue I am facing, I have created an image that is 560 by 560 pixels, primarily orange, except for a blue square in the bottom right hand corner, measuring 112 by 112 pixels, one-fifth of the size of the image.

To apply this image as a background to an element such that the blue square completely and exactly covers it, regardless of the dimensions of the element, I have used the following style:

.square
{
    background-size: 500% 500%;
    background-position: -400% -400%;
}

This works perfectly in all browsers but Opera, which shows some orange around the right and bottom edges of the element. I surmise that these orange slices are the repeated background image, as though Opera has offset the image further than it should.

I have created a jsfiddle test that demonstrates the issue , which you may view in Opera to see the undesirable behaviour I have described.

Details about Opera, taken from the top of opera:about :

Version information

Version: 12.14
Build: 1738
Platform: Win32
System: Windows 7

Browser identification

Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14

I have been able to assemble some information which may provide some clues:

• The larger the image and the further it is offset (ie. the larger the values for background-position), the further Opera gets it wrong.

• Opera renders correctly if the element is exactly the size of the blue square (112 by 112 pixels in this case - you can see that in the jsfiddle).

• Opera renders correctly if (brace yourself) the image dimensions are a multiple of 100 (ie. 500 by 500 pixels, instead of 560 by 560 pixels).

At the moment, I am guessing this is a fault in Opera, as it works as desired in all other browsers. My questions are:

• Is this a fair assumption, or perhaps even a known issue? Is Opera violating relevant specifications?

• Is there a fix or workaround, other than to re-render the image to dimensions that are multiples of 100?

Answer 1

I reported this behaviour to Opera as a "bug" some months ago, and I just re-tested this in the latest version of opera (17.0), and it is working as desired, so I will assume that the answers to my questions are as follows:

• Yes, it is a fair assumption. Yes, it was violating some specifications.
• Yes, you can update to the latest version of Opera, which behaves as desired.

For reference, the details about the Opera I just used to test, taken, again, from the top of opera://about :

Opera 17.0

Made to discover

Version information

Version:    17.0.1241.45 - Checking for updates...
Update stream:  Stable
System: Windows 7 64-bit (WoW64)
Browser identification

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45