knockoutStyle

Testing knockout style, which seems to differ between chrome and firefox

by emrys57

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<input class="biggerBox" type="text" data-bind="value: colorText, valueUpdate: 'afterkeydown'" />
<div class="littleBox" data-bind="style: {'background-color': colorText}"></div>
<div class="littleBox" data-bind="style: {'color': colorText}">A</div>
<div data-bind="text: colorText"></div>

CSS

.biggerBox {
    width: 200px;
    padding: 4px;
}

.littleBox {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0,0,0,0.2);
    margin: 10px;
    padding: 3px;
    text-align: center;
}

JavaScript

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

// In chrome or safari, the color of the box changes when I edit the input text
// In firefox, the colorText observable changes, but the box backgroundcolor does not.

// In chrome, safari and firefox, the foreground color does change.