Om de ûnderfining foar jo te ferbetterjen is tydlik de funksjonaliteit dan dizze website troch ûnderhâldswurk beheind. Wannear in artikel jo probleem net oplost en jo in fraach stelle wolle, kin ús stipemienskip jo helpe yn @FirefoxSupport op Twitter en /r/firefox op Reddit.

Avatar for Username

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

CSS styles are only applied, if I change one in the developer tools

  • 2 antwurd
  • 1 hat dit probleem
  • 1 werjefte
  • Lêste antwurd fan fritzmg

fritzmg
fritzmg
more options

On a particular website we are developing we have a peculiar problem where CSS styles that we change are not applied at all at first (with a cleared cache of course), but only if we disable and then re-enable any CSS style on the site via the inspector in the developer tools.

And in some cases it looks like some CSS styles are sort of "messed up", i.e. there seem to be margins or paddings applied where they shouldn't be. And these problems go away as soon as you open the developer tools (or the inspector in particular).

Furthermore the inspector shows CSS styles that appear to have other CSS selectors as their content (see attached screenshot to see what I mean). While this looks like the underlying stylesheet has syntax errors: the stylesheet is fine and has been validated with https://jigsaw.w3.org/css-validator/ - so that shouldn't be the issue. Besides it works fine in Chrome and Safari.

I am at a loss how I could debug such an issue as I have never seen anything like it before. This only started to happen with FireFox 79.0 so I am wondering if other people have encountered something like this also.

On a particular website we are developing we have a peculiar problem where CSS styles that we change are not applied at all at first (with a cleared cache of course), but only if we disable and then re-enable ''any'' CSS style on the site via the inspector in the developer tools. And in some cases it looks like some CSS styles are sort of "messed up", i.e. there seem to be margins or paddings applied where they shouldn't be. And these problems go away as soon as you open the developer tools (or the inspector in particular). Furthermore the inspector shows CSS styles that appear to have other CSS selectors as their content (see attached screenshot to see what I mean). While this looks like the underlying stylesheet has syntax errors: the stylesheet is fine and has been validated with https://jigsaw.w3.org/css-validator/ - so that shouldn't be the issue. Besides it works fine in Chrome and Safari. I am at a loss how I could debug such an issue as I have never seen anything like it before. This only started to happen with FireFox 79.0 so I am wondering if other people have encountered something like this also.
Keppele skermôfbyldingen

Bewurke troch fritzmg op

Alle antwurden (2)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Firefox 79 is much more aggressive about caching CSS. You may need to Shift+click the Reload button (or use Ctrl+F5) to retrieve updated style sheets. https://wiki.developer.mozilla.org/docs/Mozilla/Firefox/Releases/79#CSS

But if you disabled cache in the dev tools, that shouldn't be an issue?? On other two oddities:

Opening the inspector usually alters the height or width of the viewport, which can trigger repainting. To take that out of the equation, can you "undock" the developer tools to a separate window?

I'm not sure what to make of your screenshot. Could there be some kind of transmission error?

fritzmg
fritzmg Fraacheigener
more options

It is definitely not a caching issue. To be sure I always clear the cache completely before refreshing.

It is definitely not about the viewport or the repaint when changing the viewport. I already considered that and tested with an undocked developer tools window on a second screen. The issue disappears as soon as the developer tools are opened. Sometimes the issue even reappears, once the developer tools are closed (though I could not reproduce that reliably yet).

It should not be a transmission error, otherwise I would assume a lot of CSS styles would be broken (well, they are broken, but not really - as the described issues go away once I open the developer tools and/or disable & enable any style). Also these transmission errors would probably manifest in other browsers as well.

Conceivably the issue shown in the screenshot could also be an error in the used sourcemap file - however, since there is no such issue in Chrome/Edge I am assuming that the sourcemap file is valid.