I stumbled across an odd issue in firefox today.
The stylesheet for one of my pages doesn't load in Firefox, although it does on Chrome and Safari. When I open Firefox Developer, I can see this stylesheet. If I open it up in the Style Editor section and make any change (e.g. hit space one time somewhere on the sheet), the css is applied to the page.
Since the stylesheet seems to be loaded up properly after all, anyone know why it's not showing up initially? Probably an obvious solution, but I've been stumped on this for a while. Thanks in advance!
Do a Ctrl+Shift+R on PC or Cmd+Shift+R on Mac. I struggled with this for hours until I found this.
As you mentioned in your comment, the problem is that the stylesheet is being processed as an image.
If you open your firefox console you should probably see a warning.
So what happened is that when you edited it using the StyleEditor, the correct mime type is being fixed.
If your stylesheet is generated from a backend, you need to make sure to set the correct mimetype in the headers.
If that does't solve it, try to "save as" your file and make sure it's being saved with an encoding of UTF-8 and using an IDE or a coding text editor
Related
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I am having very unexpected problem on my Google Chrome inspector today. When I was inspecting my local HTML files I noticed I was unable to see from which css file, my classes were coming from. It's very strange because it's always showed it before. Here is the Screen shot
But if I inspect the web form not from Local it shows the files:
Why it's doing this? Is it doing it because of any recent Updates of Google Chrome ? How I can make it work for Local files too ? I need it badly.
Thanks
I just fixed this issue by referencing source maps relative to the workspace root. See my answer here for more information.
I had the same problems as you.
Try to uncheck "Enable CSS source maps" in the "Sources" group of "DevTools settings".
I suppose that one is for SASS/LESS files, but for some reason it affects normal CSS files as well.
This seems to be a bug. See https://crbug.com/422073 to track the progress on this issue and comment there if you have additional information. I am not able to reproduce this problem so far.
I am using the plugin WP Cufon on my Wordpress website, however, the font is not displaying in Firefox. Chrome and Safari are working fine. Can't seem to figure out what the issue is. Looking at the source, it is loading everything, just not displaying...
http://gonuttzo.com
Any help would be soooo appreciated! This is driving me batty.
Thanks in advance!
Cufón doesn’t work in Firefox, but works in other browsers
Cause
This issue is almost certainly caused by an empty stylesheet () in your HTML, which causes Cufón’s CSS load detection to fail. This has been happening in recent versions of Firefox only, and seems to occur a lot with purchased WordPress templates. Note that this snippet will cause your browser to load and use your front page as a stylesheet. It’s pretty much the same as href="/". Extra slowness for zero gain.
Solution
Search your HTML for empty stylesheets. Note that the markup on your site may differ from the example, but searching for href="" might save you some trouble. Also, make sure to use the actual HTML (e.g. View Source in your browser) while doing this, if you only go through your template files the issue might be very difficult to spot as the empty href can be masked by, for example, a variable that has an empty value or a function call that returns an empty value.
I have looked into this time and again and have read solutions but they simply do not work.
Supposedly, one can bypass the cache in Chrome by hitting F12, clicking the gear in the bottom-right corner, and checking "Disable cache." This does not work for me. I still get a page with cached CSS. In Firefox, I go under Net and check "Disable Browser Cache" to no avail. HTML is not an issue, just the CSS and, possibly, JS.
IE, however, doesn't have this problem. I update the page's CSS and IE updates accordingly. For obvious reasons this is not an ideal situation.
I go to my-site.com/style.css in Chrome and Firefox and the file there is not the file I see with FTP/SSH/IE. If this looks like a bug (it does to me), then please let me know. If I'm just being dumb, then please tell me what I am missing. Please.
Thank you.
One way to avoid caching is to explicitly change the url in someway. What I would suggest is to append a querystring parameter to the css url like:
http://mysite.com/content/css/File.css?version=1234
and update the version or another way is to attach the DateTimeOffset instead of an auto incremented number.
Recently I had some issues with Flash in IE, involving a SWF which is something like a gallery.
In Firefox its loads perfectly, but in IE it doesn't work properly sometimes. The first time it is loaded its works fine but when I refresh all the images are blank. The image data came from XML.
I wish to get some tips regarding the browsers and Flash / SWF behavior in each.
Thanks in advance.
I once faced a similar problem. IE first displays image properly. Upon refresh it didn't display the image. The problem was with the IE security settings on scripting languages. If the script fails to load properly on first time, IE blacklists the script and hence blocks it from running again. When u reset the security settings it will work. But you should still get into the bottomline of the issue and fix it.
Thanks,
Nirmal