When page of my application is loaded font in some html tags is default one and when you mouse over it, proper font immediately shows. I made a list of things that probably matters:
Position of element doesn't matter, it occurs on absolute and static.
Font of my choice if assigned to body tag so there is no way some stylesheets don't get loaded.
I load fonts via #import from fast.fonts.net. This line of code is almost on the top of my stylesheets, above is only reset.
I load my assets from s3, minified in one file.
It never occurs locally and the only browser that this bug was seen is Chrome.
It is rare bug, maybe 1% of all page refresh, so reproducing when you want to see it is difficult
Once I have seen this issue in bugsnag.com
App is heavy on front-end side
Do you have any ideas how I could fix it?
I discovered that injecting fonts via JS script tag and not css #import works best. After that client stopped reporting me this issue.
It's simple change and the reason why it works must be connected with some Chrome bug.
Related
I am working on a small web project which was working perfectly fine for some time but suddenly some CSS styles are not being applied anymore.
I have applied styles through a class in HTML.
When I write the same styles inline they are working fine but when applied through a class in HTML, they aren't working.
My question is, why are they working inline but not when I put them in a class and attach a CSS file?
If they are working inline but not when the file is linked I would guess that the link to the css file might have a typo. I had a similar problem earlier and turns out I was linking index.css instead of styles/index.css since I had put the css into its own folder.
First of all check the path of your css file wherever you linked it.
If its not a typo then simply press Ctrl+F5 in chrome (Windows).
Many times when your css file is large so your browser stores it in cache and hence not every time it renders your css file when updated in editor and reloaded the site.
To rectify this simply press Ctrl+F5.
This will clear the browser cache for that tab(that website) and reload the page forcing the browser to render the updated css.
EDIT: For Mac if you are using safari, the shortcut is Command+Alt+E
In Mac if you are using Chrome, Ctrl+F5 will not work, so refer to this site: https://clear-my-cache.com/en/apple-mac-os/google-chrome.html
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
I have a form in the website http://helloiwant.com/demo.html
It is done with bootstrap. However when I view it on either safari or firefox, it doesn't show it properly but it always shows it properly on chrome. My guess is something to do with css but I cannot figure out the solution. Thanks in advance!
I looked at the source code of the webpage, if everything being white is the problem you have to change color and border-color in the css to black(#000) (or the color you want) since everything is white/(#fff).
But it seems like you are using an external source for the bootstrap css, so you should go to the official site and download bootstrap and put it on your server. Remember to customize it to fit the style you are going for, or edit it manually after downloading it.
Or you can create an extra css file that loads after the boostrap css, and just add overrides for the colors.
I have no idea why it works for you in Chrome, in my experience Chrome always finds a way to load outdated css files, try to disable cache in the developer tools.
How to disable cache in chrome? <-Check answer here
I've read that putting CSS stylesheets outside of the document HEAD prohibits progressive rendering to avoid having to redraw elements of the page if their styles change, but why is this? Does it just check to see if any CSS stylesheets are outside the HEAD and delay the rendering? Why can't it just decide to load all the stylesheets first, regardless of the location within the HTML?
Well, I guess that browsers do not wait until they get the entire file (and linked files (.js, .css...)) from the server, for then to render everything in the background and then display it to the user all at once. If you have Firefox, Press F12 and check the last tab... there you can see how the browser loads things.
Unlike downloading a large file, say 200 MiB, browsers usually start displaying whatever they get from the server, as soon as they get it, while still downloading the html/php/whatever file.
You may not notice much of a difference nowadays, with fast computers and fast Internet connections, but I'm pretty sure that, if you throttle your Internet connection, you can simulate this behaviour (page slowly loading).
Having this in mind, it kind of makes sense that the browser would have to "re-render" everything, if the stylesheets were at the end of the page, doesn't it?
When a browser looks at HTML, it goes from top-to-bottom. It can't know whether there are stylesheets at the bottom before loading the HTML. The reason you load your stylesheets in the <HEAD> is so, as you said, it can progressively render the DOM objects with the styles you specified. When it sees the <link rel=stylesheet> it makes a request to get the CSS file. In terms of performance some pages would load really slowly if the browser had to scan through the whole html file for all the stylesheets, determine what styles needed to be applied, and THEN loaded the HTML. From designing-a-browser perspective, I think this only seemed logical.
In general, the idea is HTML provides content and CSS provides styling so they are to be kept separate. I guess browsers were designed so if they did not find a stylesheet, they'd just simply load the HTML anyways because in all honesty CSS isn't really "necessary". It's just eye candy which is an aesthetic that is important to us humans.
Having stylesheets at the top or in the <HEAD> gives the browser a "heads up" (haha!) knowledge of what styles you want to put so it looks nice and then once it reaches the bottom, it will see the stylesheet and then load it.
There is a really good blog post about how browsers work that might be useful.
Well, adding a <style> tag outside of the <head> isn't actually legal in HTML5.
Edited to add: unless you're using scoped styles, which only Firefox supports.
A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.
I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.
However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.
I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.
I don't believe I can accept an answer without healthy discussion.
Am I correct in that the browser's not loading EVERYTHING on every page?
Is the above tool incorrect?
Is the lesson my friend's learning from the tool's results incorrect?
Thanks.
The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)
The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.
When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.
According to me
Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not.
when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files.
You can also set Brower permissions based on your preferences.
I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.
It always loads thing in the img tags first and then all images in the css code.
It will also process the image request in sequential order ie first come first server
I hope this help.