Why is text invisible on one site on one PC?

[UnabashedGeek]

Who's up for a puzzle? About two months ago, I began to have troubles using the Town of Oakville's web site where I book fitness class spots. In places where there should be text, it's blank. My feeling is that this began intermittently, but I may be wrong. Today it happens all the time. When I go into developer mode, I can see text in the html but the screen is blank. It's like the text is the same colour as the background, but I can't find any styling that causes this. This happens on Chrome, IE, Edge and Firefox (the latter newly installed). On my previous PC, in the same room, on the same network, it looks fine. Also fine on my phone and tablet. No other site I've been on has any problem. The only differences I can think of is my current PC came with McAfee, my old one is still running Norton 360, and I have different monitors on my new PC (but it used to work on these monitors). Both Windows 10.

Screenshot attached showing Edge, IE, Firefox and Chrome renderings.

The site is https://www.oakville.ca/index.html

I just can't think of anything that could cause this on multiple browsers. Any takers?

I know this isn't a web development issue, but it seemed the closest, please move if appropriate.

[Dani]

What you are describing seems like a CSS or Javascript issue (most likely CSS).

It's possible that there is a bug in the server-side code that is serving the wrong CSS files to you for some reason (it could be based on IP address, geographic location, browser user-agent, logged in status, etc.)

Try clearing your cookies and browser cache and see if that fixes it. Is it possible that the two browsers it's happening on are the ones where you are logged in, and you're logged out on the other browsers?

[john_111]

There are 11 stylesheet files to load and then 26 javascript files. Then some sections are lazy loading and unfold as you watch. So delays in getting a file, or not receiving it at all could make some areas not display their contents. Perhaps some of these css or js files have been deleted, meaning the content is being hidden.
Then I noticed a lot of commented out content, inside divs that were not commented out. These divs seem to be taking up space when I view them, with the footer a very large distance below the rest of the content.

Basically, I think someone has tried to be really clever in the site design and then altered bits over time, and their clever ideas have backfired on them.

[UnabashedGeek]

After reading John-111's suggestions, I'm wondering if timing is critical. It fails on an i9 and works on an i7. One time I THINK I remember it partially failing on the i7, but then I couldn't make it fail following.

As I mentioned to John, the code is messy, unclosed tags, tags closed in the wrong order. There are multiple issues on the console log. It is not written to pass any standards test! However, my skills are not up to a full analysis.

[Dani]

I think that John is correct in that you have a race condition in your code. A race condition is when sometimes one event happens before another, and sometimes vice versa, and it can lead to undesired or unpredictable results. It's possible that in some browser environments (combination of web browser, Internet speed, etc.) one CSS or JS file is always loading before another, while in other browser environments, the opposite is true. It's possible that you have conflicting CSS code in two CSS files, and depending upon which one is loaded first, determines which rules overrides the other. It's also possible there is a JS file that is overwriting CSS code, etc.

Unfortunately, a forum such as this one is most likely beyond the scope of being able to narrow down exactly what is happening across sooooo many CSS and JS files and messy code, because it can take many hours to diagnose successfully. The only advice I can give is to clean up your code.