Not sure if I'm doing something wrong here or whether this indeed is a Chrome rendering bug.
Here is my very small example:
.hover-test span {
opacity: 0;
transition-property: opacity;
transition-duration: 1000ms;
}
.hover-test:hover span {
opacity: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<button class="hover-test">hover me<span>hidden</span></button>
</body>
</html>
It works in all browsers I checked like expected.
It does work in Chrome as well, when I put the CSS in a style tag directly in the HTML file.
It does NOT work in Chrome (91.0.4472.101), when I put the CSS in a separate file and include it with a link tag.
With "not working" I mean, that on page load the span is shown and then faded out, without the mouse cursor being near the button.
Is this a Chrome bug, or am I doing something wrong here?
How can I achieve the desired behaviour in Chrome, which is: span is hidden on page load and only shown/hidden on hover?
It looks like it is a Chrome bug,as written here: https://www.hawkbydesign.com/weird-google-chrome-css-transition-on-load-bug/
Well, after making some further updates and refreshing the page, I noticed that the transition was firing on page load. What I mean by this is instead of being hidden on page load, as they should be, the elements were visible and would transition to their hidden state.
this is exactly the problem reported.
More:
The bug happens whenever you don’t have any script tags on the page, apparently. For whatever reason, this causes css transitions to trigger upon page load. While I was also digging, it appears that this happens sometimes with the form tag as well. What a weird bug!
The solution is to include a script tag in your page. Whenever I found the solution, they said to include a space in the script tag, but I found that it works fine even without the space.
I actually added jQuery on the page using the CDN link and the bug seems gone.
You appear to be bumping up against a timing problem.
Try this code with your styles file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="style.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<script>
function insert() {
document.body.innerHTML = '<button class="hover-test">hover me<span>hidden</span></button>';
}
window.onload = insert;
</script>
</body>
</html>
This waits for loading before putting the button in the document and on Chrome (and Edge) on Windows10 at least all is well.
Chrome/Edge seem to differ from say Firefox in whether loading is synchronous or not - or maybe it's just a lot faster writing the document.
I am generating the favicon programatically from ASP.NET using C# which works fine in all browsers except for Chrome.
I'm passing the page to the method SetFavIcon and setting it using HtmlLink class which is forms part of the System.Web.UI.HtmlControls namespace. This is how I'm doing it;
public static void SetFavIcon(Page p)
{
HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "image/'x-icon");
link.Attributes.Add("rel", "shortcut icon");
link.Attributes.Add("href", HttpContext.Current.Request.Url.Authority + "/_graphics/_icons/favicon.ico");
p.Header.Controls.Add(link);
}
I've tried several options such as changing the type, adding a query string after favicon.ico but can't figure out why it is only happening in Chrome (works fine in Internet Explorer, Mozilla Firefox, and Microsoft Edge).
I'm testing on the latest version of Google Chrome - Version 49.0.2623.112 m
Check the whole <head> section of your page and look for non-header markups (div, p, etc.). For example:
<html>
<head>
<title>My page</title>
<div>This div has nothing to do here!!</div>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
Unlike Firefox or IE, when Chrome encounters a non-header markup in the header, it considers it to be over and supposes this is the beginning of the body. And because the link markup is not body-related, Chrome simply ignores all links that appear after the faulty non-header markup. So in the example above, the title works (it is before the div) but not the link.
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.
Inside a web page I have the following snippet:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="https://XXXXX /">
<title>Example</title>
<link href="Layout/standard.css" type="text/css" title="Example" rel="stylesheet">
</head>
<body>
The referenced page standard.css looks like this:
#import url( "standard2.css" );
#import url( "standard3.css" );
After upgrading the noscript plugin (version 2.4.3) within Firfefox ESR 10.0.4 the css pages standard2.css and standard3.css are not loaded anymore. With an earlier version of noscript everything worked as expected.
Why is noscript blocking this? Is there a known security problem importing a css from within another css? Or is it simply a bug in noscript?
Update: The problem is not the cascaded import. The problem is that I used a short URL (https://hostname/...). If I use a fully qualified URL (https://hostname.mynet.com/...) everything is working.
So it really looks like a bug in noscript 2.4.3.
The NoScript changelog doesn't mention any changes to this, so it's probably a bug.
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
style.css
body{
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration: none;
}
#main{
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
The above doesn't work. Adding the css inline in index.html works fine though
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
body {
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
#main {
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.
type = content-type [CI]
This attribute specifies the style sheet language of the element's
contents and overrides the default style sheet language. The style
sheet language is specified as a content type (e.g., "text/css").
Authors must supply a value for this attribute; there is no default
value for this attribute.
Check both files in the same directory
and then try this
<link href="style.css" rel="stylesheet" type="text/css"/>
As per you said your both files are in same directory. 1. index.html and 2. style.css
I have copied your code and run it in my local machine its working fine there is no issues.
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R.
Try it if still getting problem then you can test it by using firebug tool for firefox.
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
Still you have any problem please comment so we can help you.
You have to add type="text/css" you can also specify href="./style.css" which the . specifies the current directory
I have struggled with this same problem (Ubuntu 16.04, Bluefish editor, FireFox, Google Chrome.
Solution: Clear browsing data in Chrome "Settings > Advanced Settings > Clear Browsing Data",
In Firefox, "Open Menu image top right tool bar 'Preferences' > Advanced ", look for this image in the menu:
Cached Web Content click the button "Clear Now".
Browser's cache the .css file and if it has not changed they usually won't reload it. So when you change your .css file clear this web cache and it should work unless a problem exists in your .css file.
Peace,
Stan
With HTML5 all you need is the rel, not even the type.
<link href="custom.css" rel="stylesheet"></link>
Well I too had the exactly same question. And everything was okay with my CSS link. Why html was not loading the CSS file was due to its position (as in my case).
Well I had my custom CSS defined in the wrong place and that is why the webpage was not accessing it. Then I started to test and place the CSS link to different place and voila it worked for me.
I had read somewhere that we should place custom CSS right after Bootstrap CSS so I did but then it was not loading it. So I changed the position and it worked.
Hope this helps.
Thanks!
Also make sure your link tag's media attribute has a valid value, in my case, I was using WordPress CMS and passed the boolean value true in the media field so it showed like that.
<link rel="stylesheet" href="./style.css" media="1">
That's why it was giving error.
There are three main attributes on which the css style loading depends.
Make sure that your link tag's relation rel attribute's value must be valid for a css file i.e. stylesheet.
Make sure that your link tag's target href attribute's value must be pointing to a valid an existing Cascading Stylesheet file. Like in your case it's ./style.css.
Remember that you can use both absolute and relative paths in the href attribute's value. That means if your file style.css is present at the root i.e. / then you can also use /style.css in the href attribute's value or else if the file is present in the same directory in which your HTML file is present then you can use ./style.css as the value in your link tag's href attribute's value.
Make sure that your link tag's media attribute should be one of the following.
For every device you can use the all keyword as your media attributes's value.
For PC's and laptops only you can use the screen as your media attribute's value.
For webpage prints you can use the print keyword as your media attributes's value. Note that it also applies when you press the Print Screen button to capture the screen's image.
At last for screen readers you can use the speech keyword as your `media attribute's value.
By following these rules your HTML structure for link tag will be.
Your css file should be defined as UTF-8. Put this in the first line of you css file.
#charset "UTF-8";
You could try this:
<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important.
<link href="tss_layout.css" rel=styleheet" />
once I put the s in the middle of stylesheet - worked like a charm.
I had been facing the same issue,
For Chrome and Firefox but everything was working how it should in internet explorer. I found that making the CSS file UTF-8 made it work for chrome.
<link href="style.css" rel="stylesheet" type="text/css"/>
I had a similar problem and tested different ways to solve it.
Eventually I understood that my index.htm file had been saved with "Unicode" encoding (for using Farsi characters in my page) while my .css file had been save with "ANSI" format.
I changed the encoding of my .css file to "Unicode" with Notepad and the problem got solved.
Not sure this is valuable, but I will leave this here for others. Making sure that "Anonymous Authentication" was set to "Enabled" loaded my CSS file correctly.
To do that in Visual Studio 2019:
Select your solution's name, right click, and hit "properties"
Navigate to the "Properties" frame, typically in the bottom right corner
Ensure that "Anonymous authentication" is set to "Enabled" as shown below
Here is another cause to add to the collection on this page. In this code...
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen">
...I misspelled rel as ref.
After digging and digging on this issue, for me it was solved by Johannes on another thread: Local CSS file is not loading from HTML
The type attribute in your link tag has typographical quote
characters: type=“text/css”. Try to change these to "plain" quotes
like type="text/css"
I had similar problem.. my code was working fine but suddenly css sheets stopped working.. after some detection I found out that somehow the MIME of style sheet was changed from type="text/css" to "text-css".. Idk how they were changed since the code was working few hours ago but however I changed it and it worked fine. hope this helps.
Well I faced this issue today and as workaround (not the best) I did below
<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
where testWeb is my root app folder in my htdoc dir. in windows (using xampp) or in /var/www/html directory as for some reason I do not know yet
<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
not loading while html index file beside scripts folder in same directory.
This may be a 'special' case but was fiddling with this piece of code:
ForceType application/x-httpd-php
SetHandler application/x-httpd-php
As a quick test for extentionless file handling, when a similar problem occurred.
Some but not all php files thereafter treated the css files as php and thus succesfully loaded the css but not handled it as css, thus zero rules were executed when checking f12 style editor.
Perhaps something similar might occur to any-one else here and this tidbit might help.
I was having similar problem but resolved changing the Style.css to style.css Because of this name caps letter "S"change it was throwing 404 error we won't notice small changes in my system it was working but when I hosted in cloud it was throwing this error make sure this all being checked after uploading in cloud
i have the same probleme, i always change the "style.css" to "styles.css" or any other name
and it worked fine for me.
HTML was not loading my css because i had placed the style.css in template folder rather it should be in static folder . After replacing my file to static folder it worked for me
Use the following steps to load .CSS file its very simple.
<link rel="stylesheet" href="path_here.css">
note: 1--> don't forget to write "stylesheet" in rel attribute.
2--> use correct path e.g: D:\folder1\forlder2\folder3\file.css"
Now where ever directory you are in, you can load your .css file exactly path you mention.
Regards! Muhammad Majid.
guys the best thing to try is to refreash the whole website by pressing ctrl + F5 on mac it is CMD + R
Add type="text/css"
It worked for me.