Knockout style binding: firefox doesn't set background-color?

Question

When I try to change the background color of a little box using the style knockout.js binding:

<input class="biggerBox" type="text" data-bind="value: colorText, valueUpdate: 'afterkeydown'" />
<div class="littleBox" data-bind="style: {'background-color': colorText}"></div>

and in the js:

var viewModel = {
    colorText: ko.observable('rgba( 80, 120, 160, 1)')
};
ko.applyBindings(viewModel);

it works just as I expect in Chrome and Safari, the background color of the little box changing as I type text in the input box. But not in Firefox 24.0 on a Mac; the colorText observable changes, but the background color is never set. However, if I try to change the foreground color instead, that works on all of Chrome, Safari and Firefox. I have not tried IE.

Am I misunderstanding the programming here? Or is this a knockout.js bug? Or a Firefox bug? It doesn't seem to be anything to do with How to use the style data bindings?

jsfiddle here

Answer 1

You should use backgroundColor attribute instead of background-color.

Live Demo.

This is not a Knockout-specific thing. As can be seen in the relevant KO source code file, the binding sets style like this:

element.style[styleName] = styleValue || "";

Firefox handles this element.style[...] syntax different from Chrome, as can be seen if you type the following in both console windows:

document.body.style['background-color'] = 'red'

This works in Chrome, not in Firefox. (Interestingly, it also works in IE11.)

Answer 2

Using the alternative syntax to define CSS class names works in Firefox:

<div class="littleBox" data-bind="style: {backgroundColor: colorText}"></div>

To find out the reason a look at the source code would be necessary.