4

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

user1209809
  • 108
  • 9

2 Answers2

1

It could be something to do with specificity. For example, if you're scoping the class somewhere else in the stylesheet, it'll have a higher specificity than if it were the "naked" 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>

If the .myclass div is outside of the .scope, it'll display: none. However, if it's inside the .scope, it'll display: block every time because there is a higher specificity going on. There's a great write-up on CSS tricks about specificity: http://css-tricks.com/specifics-on-css-specificity/

stacigh
  • 676
  • 1
  • 7
  • 13
  • 1
    So, I failed to mention that the class is added by GWT after a click event. The classes work in other browsers, just not Chrome and like I said, even Chrome shows that it should be selected. If I check/uncheck any property, not just the display:none, chrome will re-render and display it correctly. – user1209809 Jul 02 '14 at 22:45
  • It's probably worth adding the GWT info to the question!! – ATG Jul 02 '14 at 22:47
  • Are you styling things using ID's? It could still be a specificity issue. ID's have a higher weight. So, if the .scope above were #scope, that would definitely cause an issue if it's not a nested group of divs. If you are styling with ID's, try switching it to a class instead and see if that fixes the issue. – stacigh Jul 02 '14 at 22:50
  • No, it is just classes. Also, assuming it is a specificity error, why would unchecking a totally unrelated item in the Styles tab, with a different class, then checking that item again force Chrome to change? For example, I uncheck the border-radius style of a separate class, then check it again and then Chrome renders correctly. – user1209809 Jul 02 '14 at 23:03
  • I attempted to make a JSFiddle, but of course, it works fine there. I don't know if it is just the complexity and number of classes involved that is causing an issue with rendering, or if there is an actual issue with the code that other browsers are just fine with. I cannot post my actual code here. I can only say that it is similar to this JSFiddle (http://jsfiddle.net/z4rMP/), but it doesn't work. – user1209809 Jul 02 '14 at 23:05
  • It's hard to speculate why your code isn't working without seeing the actual code. – stacigh Jul 02 '14 at 23:07
  • So, adding !important still has the same effect. I can only assume based on all of this it is a chrome rendering issue. Thanks for looking at it though. – user1209809 Jul 02 '14 at 23:43
  • @ATG I added more to my question above. – user1209809 Jul 02 '14 at 23:46
  • There's nothing more frustrating than debugging phantom code! If you do end up figuring it out, it'd be interesting to see what the issue is. – stacigh Jul 02 '14 at 23:46
0

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');
Community
  • 1
  • 1
user1209809
  • 108
  • 9