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.
Related
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).
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!
This question was already asked before, nevertheless the solution that was suggested didn't solved the problem.
I am trying to include the ResearchGate academicon in my website, nevertheless it is displayed as a square in Google Chrome and as square with numbers inside in Firefox, while loading the website from the server.
If I download all the files to my computer (as a zip and then opening directly the html file) it displays correctly.
The previous question that was asked with the exactly same problem (and overall situation, it actually uses the same template for the website as I do) is here with its discussion is here Font-awesome: An emoticon looks different on my computer than on the actual webpage
I already tried doing the suggested modifications in the .htaccess file without success. Does anyone of you have an idea on how to attack this problem?
Many thanks!
Edit 1:
I include here the mime types reported by my CPanel:
Mime Types in CPanel
Edit 2:
Sorry, I don't have enough reputation to post the pictures, but they are identical to the quoted previous Question (linked: Font-awesone: An emoticon looks...).
Is it even in the correct size (maybe it is very small)? When not: Check font-awesome.com .. it has set some classes with allows you to size your icons. Try this class on your html in the <i> tag: fa-x3
I´ve made the same on this page in the footer.
Don't kill me if I am totally wrong for what you are searching.
So recently I've discovered that my mediawiki pages are not functioning correctly. For example, when I edit MediaWiki:ipbreasons-dropdown in an attempt to add extra ban reasons to the dropdown.
The wiki recognizes the edit, even showing a link and diff in RecentChanges, but for some reason the extra dropdown item never shows.
The same is happening with MediaWiki:Grouppage-staff. Obviously this is a huge problem. Anyone know any way I can fix this without re-installing mediawiki?
Sounds like a LocalisationCache problem. There are no magic wands for such issues, you need to debug a bit e.g. issuing wfMessage( 'ipbreasons-dropdown' ) in eval.php. If the message doesn't contain what expected, go over the documentation for localisation cache again, it might be something simple like file permissions.
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.