I was inspecting the network tab in Chrome, and I saw that some CSS files are being downloaded twice. I don't know why, but just the ones from a CDN (I don't know if it's the problem, I just noted it).
I'm not using a Service Worker to control it, and it's only included once in my HTML (when I click to see what line is calling the file, both files point to the same line).
Here's a screenshot:
Here's the HTML:
<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u">
<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/alt/AdminLTE-without-plugins.min.css" integrity="sha384-WG5KI+rc1FCbcov6sW97p+sxrnYctXfkPWh+TtV+NHpIW2/svd8GC7v/PFFATsCh">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/skin-blue.min.css" integrity="sha384-HpPw4BJmJc5KUoRUqCQwYKo0Kk94VbzanZQdGrG0m5h2dnUTxN0FHRDmKNyv5ymR">
<link rel="stylesheet" href="https://infomec.net.br/assets/css/main.css?v=2.8">
The same happens in the incognito mode.
You can visit https://infomec.net.br and inspect it (login: stackuser, pass: stackuser; just created this user for it).
I would love any help, trick, or direction to look, since I've already done a lot of researches but nothing has worked.
Chrome 56.0.2924.87 (64-bit), Windows 10 (Version 1607, build 14393.693)
EDIT
What I tried:
Disabled any Chrome extension - Same thing
Disabled asynchronously download of 2 CSS files, they were being downloaded only once, now they're being downloaded twice too.
Removed integrity from links - WORKS!, but... why?
So, I just inspected it using Edge, and...
... same issue, but it shows that one is being downloaded by XMLHttpRequest... why?
Try removing the integrity keyword from the CDN and check if it works. For me it is working on removing it. The problem might be because of many reasons some of them being your extensions installed, your browser version etc.
Related
I was experimenting a component for my React app so I had to include the following stylesheets in my index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
After that, I was unable to get rid of them. Even though I removed those codes from index.html but I can still see them from Chrome inspector. I cleared everything for my app but those lines still exist. Why is that? How do I get rid of them?
Try to remove chrome cache. Go to Network and Disable Cache on developer window. If doesn't work remove cookies.
I've downloaded font-awesome icons in my project and imported font-awesome.min.css as
<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">
And used them simply like
<i class="fa fa-user-o" aria-hidden="true"></i>
The stylesheet was loaded so there was no problem with the path.
The icons worked fine in Firefox, but didn't show up in Chrome 61 at all, neither in Win 10 nor Linux, so I guess it has nothing to do with OS.
I don't have any plugin in Chrome that would be conflicting.
I've also tried <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> but nothing changed.
Does anyone know what might cause this problem? Thanks!
I'm having this exact same issue. I tried re-downloading the fonts and the css, rewriting my css into a new file, removing some of the scripts and tags in the head tag and nothing works. It seems to be related to Chrome 61. I was going to report this to the FA's github, but it looks like someone already did.
Forgot to mention, I'm using Polymer. And here is a solution I found.
install polymer-font-awesome with npm:
npm i polymer-font-awesome
add the following dependency to polymer.json:
"extraDependencies": ["node_modules/polymer-font-awesome/dist/fonts/*"]
import these two files:
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-face.html">
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-awesome.html">
include stlye module:
<style type="text/css" include="font-awesome"></style>
Clear the cache in Chrome and it worked for me.
If you have any kind of AdBlock turned on, you need to disable it first.
I also have the same problem that font-awesome icons appear in Firefox but not in Chrome, and I figured out that my Chrome AdBlock blocked it.
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
My css appears to be being cached somewhere. I've uploaded a new css file and none of the changes have taken place. I thought that maybe it was being cached serverside so I slept on it and still, no updates to my css. I know it's not being cached in my browser because I've cleared that three times, and the tech support says server cannot cache. I need this css to take effect asap. Help would be much appreciated.
<link rel="stylesheet" href="~Content/site.css?t123456789" type="text/css" />
is what I have in my head tag of my _layout page.
You could try forcing the browser to refresh the css file by adding a timestamp to the link:
<link rel="stylesheet" type="text/css" href="/path-to-your-css/styles.css?t=12345678910">
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/