This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Changing content of <style> tag with dev tools open causes styles to rerender

more options

I'm using freestyle on my webpage (CSS in JS solution), and when debugging issues with the console/dev tools open any change to the styles causes the entire style tag to rerender. I'm not familiar with reporting a bug to the devs but I'd like to make sure others are experiencing this issue as well.

I'm using freestyle on my webpage (CSS in JS solution), and when debugging issues with the console/dev tools open any change to the styles causes the entire style tag to rerender. I'm not familiar with reporting a bug to the devs but I'd like to make sure others are experiencing this issue as well.

All Replies (3)

more options

amattoni said

I'm using freestyle on my webpage (CSS in JS solution), and when debugging issues with the console/dev tools open any change to the styles causes the entire style tag to rerender.

Do you mean you are making an edit on the Style Editor pane, or you are making an edit in the Inspector's Rules panel? I do notice coordination among the panels with inline styles, but I haven't paid close attention to the style blocks in the HTML.

Here's another site where you can find a community more focused on the developer tools:

https://discourse.mozilla.org/c/devtools

more options

In this particular case, my code (through freestyle) is adjusting the style tag as the UI updates. I can see jittering and rerendering any time a new rule is added.

Thanks for the link!

more options

Is it this: https://github.com/blakeembrey/free-style

I don't fully understand it, but it sounds as though any time you change a style rule in your script, it could trigger a change to an affected element's class name (hash). Depending on how that switch is made, perhaps there is something like "FOUC".

Modified by jscher2000 - Support Volunteer