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… (read more)
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.