I'm getting this error in Chrome when it loads this application I am working on:
Failed to get text for stylesheet 50: No style sheet with given id found
Subsequent page loads repeat the error, but with a different number:
Failed to get text for stylesheet 152: No style sheet with given id found
This only happens in Chrome, and only with this application. There is no stack trace, reference, or any other information about what id is given, what the stylesheet in question is, or what is causing this generally. How can I find what is causing this error and fix it?
I had the same problem. It looks like a bug in Chrome's live-edit CSS/JS. Notice how the number changes on each request.
I fixed it by closing all the files that I had edited in the dev tools 'source' tab and then refreshed the page.
The error went away after I closed all the files in the 'source' tab.
I tried to reproduce it after closing the files, but I can't seem to recreate it, yet.
Here is a picture showing where to find the 'source' tab:
Still present in Chrome 46.0.2490.80 m (64-bit).
Closing sources tabs 'fixed' it.
Fixt it by holding [Ctrl] + [Shift] and refresh the page
Just experienced this today if you have a .css file open in the dev tools. If you close the .css file and reload, the issue does not happen.
Chrome 48.0.2564.109 (64-bit)
Related
I have built a stylesheet but it doesn't appears on the page on the first load. It needs a reload to appear properly. However when I look to the source download on the dev console's network tab, I see the CSS is well downloaded. So what can lead to the non-display of my CSS on the first load since it is well loaded in a CSS module-hash's mode ?
Any hint would be great,
thanks
I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:
the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html
In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)
When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).
After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.
If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.
This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!
Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here:
https://bugs.chromium.org/p/chromium/issues/detail?id=647151
https://bugs.chromium.org/p/chromium/issues/detail?id=648023
I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):
app.use(express.static('public', {maxAge: '5d'}));
I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer.
I'm sorry I can't explain this problem in details.
Edit: this solution has one major flaw: when I edit my files, the browser still loads the older versions. Therefore, I turn this max-age property off when I wish to see the changes in files. If anyone has better fix, please share.
Try clearing your cache in chrome, then restart chrome and try again.
(A 304 response header is not an error necessarily. It just means that the browser should load the resource from cache. Basically the browser says "Hey, Can I use the same copy of that CSS file that you gave me last time, or has it changed?" and the Server says "It hasn't changed, go ahead and use the copy you have" AKA 304)
If that doesn't fix the issue, you may look into ETags
How do I investigate a "style sheet could not be loaded" message in Firefox? This message appears as a red bar below the page contents and above the developer tools. How do I find out what file the browser is referring to? I'm running version 46.0 on Linux Mint 17.3.
Update
If I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Another Update
This error bar comes and goes, it is not consistent for a particular page.
This may be a very specific edge case, but I had this exact same error with no indication as to which style sheet Firefox was complaining about. It turns out that it was the Ad Blocker that I was using. When I disabled the ad blocker and reloaded my page, the error went away.
This happens almost always when CSS is gziped, but server returns Content-Length of not compressed resource. Seen this happen when using mod_deflate with mod_fastcgi. This is server side bug, not firefox.
Update Notice:
Firebug is out of date, instead of firebug you want to be using Firefox Developer Edition which has Firebug-type diagnostics and tools built in.
Get Firebug, or otherwise view the page source code (right click on it on Firefox and choose View Source) and click through on each .css stylesheet as referenced in the <head> section of the HTML page. One or more of these will return an Error 404 or some other error.
Each CSS sheet is in a <link> element in the Head of the HTML.
Example:
viewing the source code to this page will give a pile of code, in the <head> section is the <link>:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=8c7d44a438e6">
...
</head>
This shows that there is a style sheet in the link element, and for your page/site if you click through all of these (there may be multiple ones) and find the one that gives you the specific error.
UPDATE:
(Update) if I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Therefore you should be looking in each of your CSS and related documents to see which document is linking out to an unreachable resource.
Another reason for style sheet could not be loaded is "active mixed content" in combination with HTTPS. I.e. if your HTML code is loaded over HTTPS, but references a CSS that is delivered over HTTP, Firefox will block the CSS file. The blocking will cause an explanatory entry in the Web console. See https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content for more information.
The blocking will also happen if the request for the CSS file is answered via HTTPS with a redirect and the redirect URL uses HTTP. And Google Chromium will also block active mixed content over HTTP and make an entry in its Javascript console.
I had this error from this stackexchange page, got the red line in firebug console. It pointed to the link https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396 so I checked the page source copy/pasted the link into a new tab and hit enter. Firefox screamed Security issue certificate error, So I just added an exception and the CSS loads. This error did not appear in Chrome or IE.
Easy fix.
My CSS files do exist. They just don't have anything inside - they are empty.
Chrome however, show 404 errors for my CSS files.
Putting some dummy code e.g. comments in a CSS file makes the error goes away.
Any idea what went wrong for me?
Updates:
The document root of the website is /var/www/html/niuniu/.
Some of you mentions permission issue but how does it explain the issue when I put in some comments in the CSS file and the error went away - no changes in permission?
I'm using Prestashop but I don't believe that has to do with the issue here.
It appears this is just how Chrome's Developer Tools and Firebug report empty CSS file. This is not a real error that can break my website.
I'm using the text! plugin with RequireJS and Firefox seems to hate my text templates. My code seems to work just fine in Chrome and Safari. Here is the error I get.
Error: Load timeout for modules: text!templates/a.html_unnormalized2,
text!templates/b.html_unnormalized3,
text!templates/c.html_unnormalized4, // _unnormalized# <- What is this?
...
text!templates/n.html, // I don't see _unnormalized here... why?
text!templates/o.html,
text!templates/p.html,
...
http://requirejs.org/docs/errors.html#timeout
First, what does the _unnormalized# mean? It seems to append itself to the file name for some of my templates but not all. However, all of my templates are listed in the error message.
Looking at the Net inspector, it seems to be downloading the necessary template files.
I think I figured it out part of the mystery, although I'm not sure about the details. I noticed that this error occurs when I'm using Firebug and in the console options, ShowXMLHttpRequests is turned on. By turing this option off, the page loads without a hitch.
What do you think guys, is this a Firebug problem? Or a requireJS issue? I'd love to understand why this occurs.
In my case, if I just disable the "Script" tab of FireBug, I have no more freeze or time out error.
Firefox 27.0.1
Firebug 1.12.7