Why my webpage is loading without CSS in Chrome and Safari? - javascript

I am developing a website with CSS and JS modifications.
While testing the website, it is working fine in IE-8 and Firefox browsers. But in Google Chrome and Safari the web page is loading without CSS.
I checked all the CSS paths on browser and all files are loading perfectly. But on the HTML page, these CSS files are not loading. So the webpage is displaying the contents without any CSS properties.
What changes do we need to make in Chrome and Safari in order to make the website work perfectly.

As for Chrome, it probably the cache. Chrome assumes that he has cache of the css that's why he will not load it. Deleting cache helps in troubleshooting unloaded css problems . Same things happens on Safari base on my experience with it

Related

My site is not rendering properly in chrome, Could this happen if Bootstrap and a CSS3 Class conflicted?

I am working on a new page, the domain is quite large and I have never encountered this problem. I have finished my page that shows very well in all internet browsers, except in Chrome, I have cleaned the cache and nothing fixes
Could it be my CSS?
Any experience and / or suggestion?
In the image on the left is EDGE on the right is Chrome
If you think your code is error-free and it is the caches you're having trouble with. Then try pressing CTRL+F5 to reload the page. It works for me when the changes in the page are not being applied consistently.
It was conflicting attributes between a personal CSS3 Class and a bootstrap class, each browser would render differentely

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Website functioning on all browsers except Internet Explorer 8

So i just finished up my website and uploaded it (New-ish web dev, please don't be to harsh). It works fine on all browsers except IE8. The website has a lot to load (images, etc.) so it is white screen for 1 - 2 seconds then fades into the actual site. On IE8 (IE9 + works just fine) the page stays on the white 'loading' screen forever. I have a lot of code here and I'm just wondering what you professional web developers here think i should do!
Website URL: http://cydronix.kkhorram.info/
There is two options: forget about IE8 or make it work on IE8.
Sounds like you have a problem with your javascript. To debug javascript on IE8, read this How to debug Javascript with IE 8.
I think one of your included .js files causing the issue. Check for the compatibility of your used javascript files
You said you uploaded the site - could you post the link if its live - otherwise without seeing some code the issue if difficult

HTML5 website loads in chrome and safari but does not load in IE

I am creating a website for a NGO, which is actually a blog on www.blogger.com
(http://youngkidsofafrica.blogspot.com/)
I used the free HTML5 template on wix.com and copied that code into the blogger (classic template) HMTL.
The site loads fine on chrome and safari but does not load at all on IE (tested on 8,9 and 10)
On IE it just loads a blank page.
I really like this template and want to use it for a the website/blog.
Can someone please help me fix this IE related issue?

Reload js and CSS on Chrome and Firefox

I heard about xRefresh that doesn't support new browserrs and firebug, also Reloadit that works only with ie. How can I reload updated js and css without refreshing whole page on Chrome or FF?
I think correct way is using http headers to tell browser not to cache certain images, javascripts etc.
http://www.mnot.net/cache_docs/

Categories

Resources