Search code examples
google-chromegwtdeveloper-tools

Why does the Chrome developer tools computed style show something different from the styles tab?

I have a class that has display:none in my css. When I apply it to a div, the Chrome developer tools "Styles" tab shows display:none, however, the div is being displayed. When I go to the "Computed" tab, it shows display:block for my div.

If I go back to the Styles tab, uncheck the display:none, then recheck it, the div then disappears. This seems to be an error in Chrome, but I am not sure.

I should mention that it is not grayed out or lighter text, nor does it have a strikethrough.

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

I attempted adding !important to my css, but I get the same results.

Any ideas?

Here are some screenshots of the Chrome developer tools:

Styles Tab

Computed Tab

Solution

  • Not sure what the actual issue is (filed a bug with Chrome), but several solutions found here work:

    How can I force WebKit to redraw/repaint to propagate style changes?

    I chose this one and everything is working:

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