CSS not updating correctly after jQuery drag/drop but does in Inspector

Question

I have this odd issue where the items in the black container below get dragged to the grid above. However the items have this opacity/orange look. The structure of the cell has a container and the item inside it. The container cell has an orange background on hover, but if I move the cell from the black container up fast into the grid so the hover doesnt show it works just fine.

Now the item inside it has a class called "show-game". If I toggle the opacity on this from 1 to 0 and back to 1 in Web Inspector I get the desired look of A1 vs A4.

Is something wrong with my Chrome Browser? This doesnt happen in IE. Seems like the style isnt getting refreshed.

<td class="item-container draggable-item-container clearfix ui-droppable">
                            <div data-tooltip="" class="item clearfix draggable-active draggable-item show-game ui-draggable tooltip-init" style="background-color: rgb(255, 55, 108);" data-bind="draggableCss: { disabled: $data.Disabled(), matchup: $data.Matchup, invalid: $data.Invalid, current: $data.Current }, draggableGameHandler : { disabled: !$data.Matchup, disabledDrop: $data.Disabled() }, delegatedClick: $root.members.eventSchedule.editGame.open.bind($data, true, ($data.Matchup && $data.Matchup.Type == '@((int)ScheduleType.Pool)'), $parent.Games)">

                            </div>
                        </td>



ko.bindingHandlers.draggableCss = {
        update: function (element, valueAccessor) {

            var values = valueAccessor();

            $(element).toggleClass('ui-droppable-disabled', values.disabled);
            $(element).toggleClass('hide-game', (!values.matchup || !values.matchup.Selected()));
            $(element).toggleClass('show-game', (values.matchup && values.matchup.Selected()) ? true : false);
            $(element).toggleClass('empty', !values.matchup);
            $(element).toggleClass('expand', viewModel.showTeams());

            if (values.editable) {
                $(element).addClass('editable-game');
            }

            if (values.matchup) {

                if (values.matchup.Selected()) {
                    $(element).removeClass('occupied', false);
                }

                if (values.invalid && values.invalid()) {
                    updateElementColors(element, values.matchup.Color, 'invalid');
                }
                else if (values.current && values.current()) {
                    updateElementColors(element, values.matchup.Color, 'current');
                }
                else  {
                    updateElementColor(element, values.matchup.Color, false);
                }

                if (values.matchup.CrossGame)
                    $(element).addClass('cross-game');


            } else if (values.invalid && values.invalid() && !values.disabled) {
                updateElementColors(element, null, 'invalid');
            } else {
                $(element).removeClass('invalid').removeClass('current');
            }
        }
    };

Answer 1

If you're using google chrome, open the Inspect tab and then to the tab "Computed". You should see all the css applied to this element and where it's set.

Check for "hidden" css overwriting rule.

If you want to avoiding override try the "!important" tag in css rule.