I have the same page open in two different browsers on the same computer. On one, the styles are completely broken and all over the place. On the other, they are fine. I am dealing with a big project but, in this case, a very simple HTML file and a very simple assets folder with three stylesheets and 20ish images - these are all in the same folder.
**
Notable info:
**
I have invalidated every possible related cache. This seems to work sometimes.
This issue seems to occur randomly and frequently - 50% of the time it looks fine, the rest it does not.
I have uploaded fresh versions of CSS assets (with -v2 tags on the filenames) as well as changed the names of the HTML files and it has helped, but apparently only temporarily.
In devtools, under sources, I can see the CSS files in both the working and broken browsers. They look different, but completely at random. Lines appear to be missing or added in one or the other.
This was initially a Figma-exported page with a LOT of absolute positioning (I'm rebuilding it but it's not done).
Related
I'm building a few GitHub Pages using Jekyll, and I'm stuck with a mystery.
A number of asset files existing in a repo, and yet they do not seem to render correctly.
One repro of things can be found in the repository for Irregular. Its gitHub page shows empty space where .gif assets should be.
The GitHub Actions log indicates it has been copied
The asset seems like it is there, but just renders as a transparency.
see: https://irregular.start-automating.com/assets/images/RegexSyntaxHighlighting.gif
Another repo can be found in the repository for EZOut. Its page also shows blank space where there should be images.
The image is displayed correctly when I run the pages locally.
What could be causing this behavior? What can I do to workaround it?
All ideas are welcome.
Thanks
I have forked your repo and my GH pages build just shows up working fine with no changes, see https://cadamini.github.io/Irregular/
I have tested both images on my site (https://cadamini.github.io). It seems like an encoding issue. The raw content of both images looks different, one had normal characters, and the other one displayed � characters.
Your repository actually contains multiple versions of the file in question, but only one is working.
You seem to have (intentionally?) overwritten three of them two months ago. The last working version was this commit.
This got me thinking about what else could mess up the repository, and it seems like the culprit was a GitHub Action that replaced the files. I noticed an issue tracking this, and it appears fixing it has fixed the display issue.
As far as why it showed up as it did, I have some theories:
Because the file was valid and then rewritten as text, some bytes were malformed and out of order.
GIFs, being an older format, were able to guess at a resolution but otherwise fail to decode (hence appearing invisible, though not with the correct bounds).
PNGs, being a newer format, recognized they were corrupted and failed to render.
SVGs, which are really just XML under the covers, rendered fine
This just shows that encoding issues can visually manifest in many different ways with different formats. Very fascinating.
I've built a website in HTML, CSS, Bootstrap 4 etc. etc. through Atom. Every time I make changes and upload the new version to the hosting platform (HostPresto in my case) browsers load the previous (presumably cached) version. I know browsers use the cached data for loading and data efficiency etc. However, my aim is to force any browser to reload from scratch, ONLY if some part of the website has changed. How do I do this?
I've seen some answers on stackoverflow to similar queries over the years, where people have suggested using code in the website header to effectively wipe the cookies and cached data each time it is loaded. I don't want to do this all the time, since more often than not, no changes will be made and my website will be less efficient.
My hosting provider has said that it would help if I upload ALL website files each time only a bit has changed. I tried this today and it doesn't work - I still have to clear the cache for it to load properly.
Can anyone help me work out what to do, to get any browser to identify when changes have been made to my site, so that it will load them automatically? Thanks!
I've cracked my own issue, so to speak, so I thought I'd post the answer here, in-case it helps others.
Basically, I noticed that the HTML files would always reflect the latest changes. However, it was the CSS files that wouldn't. The CSS files were the culprits for loading from the browser cache.
To correct this, I have started adding versioning to my CSS files to force the browser to load the new CSS file, ONLY when the CSS is updated. it works like this:
The name of the CSS file isn't changed. That is, and always was styles.css. You might call it something else.
The old call I would make for my CSS file, in the head of the HTML file, was: <link rel="stylesheet" href="css/styles.css">.
The new call is: <link rel="stylesheet" href="css/styles.css?version=1.0">
All I have done is add ?version=1.0 to the end of the CSS file name in the HTML header. If the version number changes, the browser will load the newest version. If the version number is the same, it won't load the newest one.
I imagine this would be quite straightforward for some but since I have managed to sort it myself, I thought it might be useful to share with others. There's now no need for adding hard code into the HTML header that causes efficiency-losing reloads from scratch unnecessarily!
I have a small issue with IE. I'm working on a site nothing fancy just some static html pages (around 35), I am using bootstrap as a skeleton, font-awesome, Animate.css,responsive styles, Jvectormaps, footables, custom styling ect... I usually write and include separate css files to keep things easy to maintain, everything's working well until I decided to merge all files in a single one because I need to test if my pages load faster.After doing so IE seems not processing the whole stylesheet file because when I go the developers tool then check my merged CSS file I can see it is like cut in half. This is weird , I am sure not sure why IE is leaving out all the rest.
SO i split the main file into two separate ones, now everything is back to normal
In Chrome / Firefox I do not face this issue so I am certain it has something to do with IE(9/8). Does anyone know Why? if it is realted to file size? (450Kb) Is there a way to include all file in one or I should keep separate ones?
Thanks,
You might be hitting the limits on how many elements IE 9 and down can display. Use a site like the one below to see if you are below the count limit:
http://snippet.bevey.com/css/selectorCount.php
If you are using Grunt in your project, there are tasks that can split your css up automatically to fix this issue.
You may be encountering some of the CSS limits that are related to IE. Microsoft has changed/increased/removed these limits in more recent versions, but you may still encounter these limits.
There are many possibilities such as which IE version is being used, and what document compatibility mode is specified.
If your pages have an older document compatibility mode specified, you will encounter some of the lower limits that limited older versions of IE.
See: http://msdn.microsoft.com/en-us/library/ie/hh781508.aspx for more details.
Starting this afternoon, with the introduction of Chrome 31.0.1650.48, many web pages are displaying with random formatting errors. I've confirmed this on both Mac and Windows machines running the most recent auto-updated Chrome release (31.0.1650.48).
This problem is affecting thousands of pages, and to immediately rule out our server generating different information, you can try this to reproduce the problem:
Visit this Google cache page with Chrome version specified above: http://webcache.googleusercontent.com/search?q=cache:nt70v_rn5BwJ:alaskanmalamute.rescueme.org/Idaho+&cd=61&hl=en&ct=clnk&gl=us
Notice what dogs are displayed and where they are.
Reload the page several times and observer closely.
You will randomly see one dog listing in the middle of the page, then two dog listings, the dogs move around, the menus around the dogs move around. Each time the page is reloaded Google is corrupting the source code in different ways, resulting in major formatting issues. (NONE of this code is generated outside of Google's cache.) All the pages on the www.RescueMe.Org have this problem, I'm using a cached page on Google's server in this article for an example since it proves it is not a server issue.
This sample page should remain the same every time, and be formatted correctly. It isn't.
Google Chrome (when viewing source) seems to be making random changes to the page (Chrome is dropping < or > at random places in source code) causing major display formatting issues.
Can someone reproduce this? Hopefully the folks at Google know about this issue, or someone here can escalate it with them?
Best wishes,
Jeff
can confirm - it seems to mostly be an issue with iFrames.
VisualForce iFrames in Salesforce break the entire layout.
Version 31.0.1650.48 on Mac, all addons removed.
In case someone else runs into this issue, I've narrowed it down somewhat. Chrome/31.0.1650.48 will randomly scramble the placement of tables on a page if the following two things happen:
1) You start the page like this: and do the reverse at the end: (doesn't have to be face=arial, any font setting or even just does the same thing).
2) Include some tags within the page containing various tables.
3) Magic! (not good magic, though) Each time your tables will randomly move about the page. Here's an example to try: http://server1c.rescueme.org/testb (Reload this page several times in in Chrome/31.0.1650.48 on Windows or Mac to see the tables jump around.)
THE SOLUTION: Start the page like this instead: and do the reverse at the end: (in other words, reverse placement of the center and font tags). Here's the "fixed" version of the page above with just those tags reversed: http://server1c.rescueme.org/testbfixed
While this is a Chrome bug, I feel this is worth keeping in Stack Overflow because this bug is breaking a lot of major sites, and programmers may want to know how to reprogram their HTML so those who have affected versions of Chrome won't have a confusing experience.
FYI... There are other ways to cause and solve this problem, but I'm trying to present here just the simplest method I found.
I've notice that some pages begin to render almost immediately, while others sometime have to wait until many or all of the resources (javascript, image, css) have been downloaded. The worst case seems to be for a large page, on a slow connection or server. One specific page I'm looking at comes out to almost 2 MB, with 30 different .js files, a dozen .css files, and 80 image.
I'm aware of the suggestions at http://developer.yahoo.com/performance/rules.html, but what would be preventing the browser from attempting to render the page until the last element has been downloaded?
There are a handful of reasons why this may happen. The most common that I see are large tables.
For example, Internet Explorer doesn't like to render a table until it is finished loading.
Each browser is a bit different though, in how they render things that are still downloading.
The general rule is to not use tags about structure to affect layout. With the styles at the start of a page a rendering engine knows what it has to do to render a certain part of the page, but it always has to wait for a part to download to know how to render it properly.
With that in mind:
Tables should rearely (never?) be used for layout purposes.
Parts that should be reasonably rendered first (sidebars, toolbars, and anything that framews the page) should be featured at the top of the HTML document.
The huge JavaScript libraries in use today are different in that they only need to be loaded (and cached) once.