Websites not displaying all elements
I have a couple of client websites that sometimes has trouble displaying page elements. I think it's related to some Javascript that's controlling elements animating in as user scrolls down the page. The page will sometimes load fine, but other times elements don't display resulting in large blank areas and the hero video doesn't load.
It's behaving as if Javascript is disabled in browser settings, but it is enabled. Only happens in Firefox, no issues in Chrome. My developers can't figure out what's happening.
Wšykne wótegrona (5)
Did you check the Web Console for relevant-looking messages ?
Console doesn't look too different between when the issue occurs and when the page displays properly.
I notice a "reached loc slider resize" message in the second screenshot.
If you use extensions ("3-bar" menu button or Tools -> Add-ons -> Extensions) that can block content (Adblock Plus, NoScript, DuckDuckGo PE, Disconnect, Ghostery, Privacy Badger, uBlock Origin) always make sure such extensions do not block content.
- make sure your extensions and filters are updated to the latest version
- https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems
Firefox shows a purple shield instead of a gray shield at the left end of the location/address bar in case Enhanced Tracking Protection is blocking content.
- click the shield icon for more detail and possibly disable the protection
You can check the Web Console for relevant-looking messages about blocked content.
- https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop
- https://support.mozilla.org/en-US/kb/smartblock-enhanced-tracking-protection
- https://support.mozilla.org/en-US/kb/trackers-and-scripts-firefox-blocks-enhanced-track
You can try these steps in case of issues with webpages:
You can reload webpage(s) and bypass the cache to refresh possibly outdated or corrupted files.
- hold down the Shift key and left-click the Reload button
- press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
- press "Command + Shift + R" (Mac)
Clear the Cache and remove the Cookies for websites that cause problems via the "3-bar" Firefox menu button (Settings).
"Remove the Cookies" for websites that cause problems:
- Settings -> Privacy & Security
Cookies and Site Data: "Manage Data"
"Clear the Cache":
- Settings -> Privacy & Security
Cookies and Site Data -> Clear Data -> [X] Cached Web Content -> Clear
- https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox
- https://support.mozilla.org/en-US/kb/how-clear-firefox-cache
Start Firefox in Troubleshoot Mode to check if one of the extensions ("3-bar" menu button or Tools -> Add-ons -> Extensions) or if hardware acceleration or userChrome.css is causing the problem.
- switch to the DEFAULT theme: "3-bar" menu button or Tools -> Add-ons -> Themes
- do NOT click the "Refresh Firefox" button on the Troubleshoot Mode start window
The "reached loc slider resize" line as part of the scripts-min.js might indicate that something preventing the Javascript file from loading and causing the issue? Looking at the Network tab, all JS files are transferring.
Still occurs in Troubleshoot Mode. Clearing cache sometimes works, but when the page is refreshed again the issue comes back. Even when reloading and bypassing cache. I can refresh the page over and over again in Chrome without issue.
White text on a white background... not a good look. The scripts are minified, so I can't really tell for sure what's going on, but I have a theory.
This probably results from assigning the background images in an "onload" handler. When Firefox loads pages fresh, it fires the load event, but when it loads from cache, especially the "fast back-forward" cache, it does not fire the load event, only the pageshow event.
- https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching#new_browser_events
- https://developer.mozilla.org/docs/Web/API/Window/pageshow_event
As a minimal workaround while you sort out the script, consider applying a default background color to areas affected by this problem so the text is readable.