Chrome developer tools some styles from CSS file grayed out/uneditable?

Question

I found lots of questions regarding the grayed out styles in Chrome developer tools, but none that describes the strange behavior I have. I have plain class styles in a CSS file. For some reason I can edit one of them, but not the other:

CSS file:

.result {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

.result_image {
    height: 80%;
    overflow: hidden;
}

.result_text {
    font-size: 13.6px;
    margin-left: 5px;
    font-weight: bold;
    height: 20%;
}

HTML:

<div class="result">
    <div class="result_image"><img src="..."></div>
    <div class="result_text">Some text</div>
</div>

As you can see in the screenshots, I can edit the div class="result_image", but not the div class="result_text". I think the problem has something to do with Chrome claiming that the grayed out style comes from a style-tag, but both styles are in the file "qb1.core.css".

Answer 1

This happened to me without any iFrame. It turns out that there was a style in my stylesheet giving the background to a particles.js area an empty url. Basically, it said: background-image: url(''); - this was in a completely unrelated area of the css file, but as soon as I commented it out and refreshed the page I could edit the css from developer tools and it showed as coming from the css file, not from a style tag.

Another thing to point out is that when I observed the css file from the Sources tab the css file showed as completely empty. When I saw that, I was able to find the info about the empty url css rule at the following forum post https://groups.google.com/forum/#!topic/google-chrome-developer-tools/Z_TLvpOXrMg

Answer 2

Ok, this seems to happen because my HTML/CSS is in an iframe and I only reload the iframe. When I hard-reload the whole page, the class is not grayed out anymore. Maybe Chrome loses the context, if some of the code comes from the cache.