Why is there something different from the style tab in the laid out Chrome developer tools?

Question

I have a class that has a mapping: none in my css. When I apply it to a div, on the Styles tab of the Developers tab, Chrome displays the display: none, however the div is displayed. When I go to the "Calculated" tab, it shows a display: block for my div.

If I go back to the Styles tab, uncheck the box: “no”, then double-check it, then the div will disappear. This seems to be a bug in Chrome, but I'm not sure.

I must mention that this is not gray or light text, and it does not have a strikethrough.

In addition, it is based on the click event in GWT that this class is added to one div and removed from another.

I tried to add! important for my css but getting the same results.

Any ideas?

Here are some screenshots of the Chrome Developer Tools:

Answer 1

I don’t know what the actual problem is (a bug with Chrome was registered), but several solutions were found:

How to get WebKit to redraw / redraw to propagate style changes?

I chose this one and it works:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

Answer 2

This may be due to specifics. For example, if you look at a class somewhere else in the stylesheet, it will have higher specificity than if it were a bare class.

.scope .myclass {
  display: block;
}

.myclass {
  display: none;
}

// .myclass will be displayed
<div class="scope">
  <div class="myclass">...</div>
</div>

// .myclass will not be displayed
<div class="myclass">...</div>

div.myclass .scope, : none. , .scope, : , . CSS : http://css-tricks.com/specifics-on-css-specificity/