CSS Rendering Issue in Chrome / Firefox - html

I was trying to design this site:
http://bylc.org/summit2012/
When I was working offline in my pc everything was alright. But when I uploaded it in the server, the problems started to show up.
When I try to load the file for the first time everything seems to load correctly but after reloading the page the carousal stops working and the right part (side bar) of the page gets down and renders some text in different color and font. Also there becomes a little space between the carousal and the side bar.
I've tried everything in my knowledge. tried X-UA-Compatible, stopped all javascript in the page. But nothing did work. :( Could anyone please check and help.

Disabling scripts altogether caused the errors to occur on initial load as well as on subsequent loads, which leads me to believe it has something to do with the order of things loading in your page.
I suggest moving your script declarations from the head to just before your closing body tag to ensure they load as quickly as possible.

Related

Opening Devtools on Chrome makes entire page trip

I'm working on a small website and I'm writing a website almost from scratch. I'm using Bootstrap 4 and I'm modifying only basic CSS.
Whenever I open the Chrome Devtools, the website completely flips out and it looks like it keeps reloading. The entire website only loads from localhost, however, the network tab keeps showing repeating requests to the saem assets, over and over again. The second I quit Devtools, the entire behavior stops. I've tried installing a cache killer, tried incognito, but the problems keeps appearing.
I'm also using Octicons, and what I have noticed is that when I manage to get the Devtools to at least stay focussed at the right part, the <i class="oi oi-chevron-right"> node keeps flashing in purple, indicating there is a change to that node. I can't open it and even just clicking on it won't help, the entire CSS keeps shifting in the inspector bar and it seems like something is making rapid changes. It appears that Chrome re-applies styling changes that I made a few days back, such as locally modifying the margin of an element.
I was able to work on the website just fine a few days ago, but even moving back in commits won't keep the problem from happening. I am starting to think it is a bug with Chrome, but I can not confirm this in any way.
Is there anything that is known to break Chrome's Devtools, that might explain this behavior, or is there a way to clear the cache of the Chrome Devtools specifically?
The "Changes" tab in Devtools reports that there are no changes, but the CSS I see on page makes me seriously doubt it. Removing the icons entirely does not seem to resolve the problem, so I think the issue lies elsewhere. Breakpoints are not triggered either.
I'm not sure but,
Have you checked the chromium extension program?

Page layout different on 1st load in chrome

I'm trying to get a job as a developer. I've made a personal website to show employers but I've got a bug. Everything is fine in all browsers except Chrome.
On the first load of the page, the navbar layout is messed up. After you hit refresh or navigate to other pages the proper layout is maintained.
I have no idea what is causing this. Can anyone help?
Link to website: www.alexanderisgr8.com
Possibly a caching issue due to an older css. Try doing a hard-refresh [ctrl+f5]?

What is causing this white space at the bottom of my page in Chrome?

I've been working on my new website for many days (building it locally on my Macbook Air), and always testing it locally in the Chrome browser on my computer. When I view it locally, it looks perfect. However, when I upload it to my hosting account # hostmonster.com, for some reason it gains this extra white-space at the bottom of the page. This white space does not appear when I view it locally, even using the exact same browser.
Here's the website uploaded to my hostmonster account: http://happify.org/chesslessonsNEW03/
I've tried searching through stackoverflow and google in general, and I haven't found any answer to this specific question.
I tried looking at the chrome developers' console and the white space was not included in the body, nor in the html tag. It appears to be outside of the html document. In Chrome developers' console it says something about "shockwave flash" at the bottom of the page where the white space is... I don't know what that is, I didn't put it there, and I'm assuming right now that it's put in there by hostmonster. I'm not sure if that's what's causing the white space but I just wanted to point it out just in case.
Please let me know if you figure out what's causing this white space and how to get rid of it!
Thanks!
Namaste.
It might be a 3rd party extension that is causing it as they can modify the look and behavior of the page.
You may want to try disabling the extensions for the time being to see if it is causing the issue.

Website doesn't display properly

The website I'm developing suddenly stopped working properly. The images on my Homepage appear sliced and in weird places (however when inspecting source and hovering over certain elements, the highlighted content seems to be in the right place), some hover on effects don't work and some text doesn't render.
Everything works properly in all other browsers except for Google Chrome. I cannot think of any other thing I've updated in the source code than executing svginjection plugin.
I uploaded my backed up files that used to work before, but the problem still occurs. It doesn't show up on every single computer, just on some (and I've checked it on multiple machines, both - Mac and Windows).
Just to clarify, I did clear the cache, I did check in the Incognito mode, I did restart my computer. None of these helped. I'm also 80% sure that problem only occurs on computers, on which this website was previously opened (the pattern I noticed after making around 10 tests at work).
Thanks for any help
Aight, so after going through all my files, trying to disable multiple options, etc... Everything is fixed now. If you do have similar problem, go through your css files and disable all webkit powered transforms and transitions, cause apparently enough is enough and if you have too many, Chrome just won't handle it. I managed to still reuse some of them, so... Must have caused some glitch in the matrix and that's why it all got messed up. For weirdly positioned images check z-index of parent container.

Why do images reload on refresh on one server, but appear instantly on another?

These two websites are exactly the same:
http://www.inandoutofwonderland.com
http://dev.zelencomm.com/inandoutofwonderland/
However, when I press F5 to refresh (or Command-R on Mac) the former website renders immediately and without any visible image loading, the page image does not even flicker or move in any way.
When I do this on the latter copy of the site, it goes to black, and all images disappear and visibly all reload from top to bottom.
The two websites are exactly the same in both files and database. I've tested this is Firefox, Chrome, Safari and Explorer both on Windows and OSX, and I have the same behavior everywhere. The two sites are on different servers, so I can only conclude this is some server setting I am unable to track down. The servers seem to have the same speed, it's just one makes the site reload its images on refresh while the other does not.
I have tried to add the "ExpiresByType" commands into the htaccess file on the 'slow' site but it does not seem to have any effect.
I would really like to figure out what the difference is so that I can make the latter website's server behave like the former and load its images up immediately rather than have the whole top-down rendering thing.
Thanks for any insight into this.