Chrome “background: 0” wrong cssText in document.styleSheets

Question

I developed a Chrome extension that applies all CSS styles to the "style" attribute of elements(to use in emails etc.). I've found a strange behavior in Chrome with this css style:

button{
    background: 0;
}

in document.styleSheets when I read cssText of this rule I get:

button { background-position: 0px 50%; background-repeat: initial initial; }

But it's wrong because I do not override background-color or background-image properties. The strange thing is that the background of button actually is "none" after applying background: 0, issue only with cssText.

In Firefox I get:

button { background: none repeat scroll 0px center transparent; }

Which is ok.

JS Fidle Demo(open in Chrome):

JS Fidle

Is it Chrome bug or something else?

Answer 1

By setting " background: 0; " you are assigning the button element an improper value. Chrome must interpret that improper value differently than other browsers. Change " background: 0; " to " background: none; " and that should do the trick.

Answer 2

No, it's not a bug, either the returned value is not wrong. This is how Chrome tries to fix your invalid CSS. Firefox seems to be smarter with this, and IE is totally handless in front of your CSS, it returns button { background: 0px; } button { background: 0px; } .

Actually the question is quite trivial, there's no standard for how browsers should handle invalid code. They can try to fix the code as they wish, or even ignore it.

A fix would be to use a proper value in the rule:

button {
    background: none;
}