At times, Chrome fails to load CSS files when requested

Whenever I visit this ASPX page, the stylesheets sometimes fail to load. There is no request made and even checking the network log in Chrome's debugger confirms that it didn't request or load from cache. Interestingly, all other resources such as images and JavaScript files load without any issues. The unusual thing about this site is that it loads a stylesheet via JavaScript, which always works fine. There's also an iframe on the page and its CSS always loads correctly too. This issue seems to occur randomly, maybe around 1 out of 10 times. I can't recall if it happens when testing locally, but it occurs consistently across three different IIS servers. Strangely, the file shows up in the sources tab of Chrome DevTools. Could this be a bug in Chrome or something related to how the closing tags are written in the links? Has anyone else encountered this problem before?

<head>
....
<link type="text/css" rel="stylesheet" href="~/css/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6f75687932717572327f6f6f236a215c51778">[email protected]</a>" />
    <link href="~/lib/tabulator/css/tabulator.css" rel="stylesheet" />
<link id="glcss" type="text/css" rel="stylesheet" href="/css/empty.css">
</head>

There is JavaScript code that runs during the initial loading of the page, just before document rendering, which sets a stylesheet for the page. I'm not sure if this could be causing Chrome to randomly ignore the other CSS documents. However, this particular stylesheet always functions correctly.

 var stylesheetPath = _pth + "/css/custom_gl_theme_" + dd.value + ".min.css?v=" + _v;

    $('link[id="glcss"]').attr('href', stylesheetPath);
    this.value = dd.value;
javascripthtmlcssasp.net

Answer №1

Although the root cause remains unknown, the implemented solution involved a process triggered upon page load. Essentially, a check is performed to ensure proper loading of CSS files, and in cases where they do not load correctly, the URL is reset to force a reattempt.

$(window).on('load', function (e) {
    var links = document.getElementsByTagName('link');
for (var i = 0, linkLen = links.length; i < linkLen; i++) {
        var link = links[i];
        if ((link.id == "") && (link.type == "text/css")) {
            var cssHref = link.href;
            link.href = cssHref;
        }
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Next.js dynamic route that takes in a user-submitted URL for customization

Currently, I have implemented the Next.js Router to facilitate the display of different dashboards based on the URL slug. While this functionality works seamlessly when a button with the corresponding link is clicked (as the information is passed to the Ne ...

javascriptnext.jsdynamic-routingnext-router

How do I retrieve the field from a BsonDocument in MongoDB using C# after calling an aggregate method?

I have two collections called "images" and "user_preff". Within my application: The "images" collection includes fields for "file_name" and "data" (byte array) The "user_preff" collection contains fields for "username" (the user who liked the image) and ...

c#asp.netmongodbmongodb-querymongodb-.net-driver

Having trouble making changes to a precompiled ASP.NET web site? Visual Studio seems to be giving you some trouble because the site

For quite some time, I have been successfully maintaining a web application on ASP.NET (C#) with precompiled components. As I try to extend the application by integrating a remote SOAP service, Visual Studio raises an issue regarding the precompiled nature ...

c#asp.netsoap

Navigating a plethora of unpredictable identifiers using AngularJS

My goal is to display content from a json file that varies in type and consists of pages divided into chapters. Users can navigate through the content using an aside menu or next and previous buttons. Currently, I am able to display the content by inserti ...

javascriptphpjqueryangularjsurl-routing

Mastering the art of raycasting onto a point cloud in ThreeJs R71

I am currently working with Autodesk Forge, leveraging Three.js r71, and I am looking to implement a raycaster to identify clicks on various elements within a point cloud. If anyone could provide a sample code snippet on how to achieve this using Three.js ...

javascriptthree.jsautodesk-forge

Using PHP and JavaScript to keep track of file modifications

Being a beginner in PHP and Javascript, I recently created a basic Clock application using Javascript which worked out successfully. Now, I have a file that will automatically change its content. For example, it might look something like this: "12h15: eat ...

phpjavascriptajax

Is it possible to generate .js, .min.js, and .js.map files using gulp?

My goal is to minify my resource files using gulp 3.9. I have set up two tasks in my gulpfile as follows: var gulp = require("gulp"), concat = require("gulp-concat"), cssmin = require("gulp-cssmin"), filter = require('gulp-filter'), sourcemaps ...

javascriptgulpgulp-watchgulp-uglify

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Experimenting with a combination of vue.js and vanilla to create a blackjack game. The card data is stored in the vue data() like this: data(){ return { cards: [ {id: 1, cardName: 'Ace of Spades', cardPic: ' ...

javascripthtmlvue.js

Is the value of the incorrect store ref in Vue3 being altered?

Welcome to the store: import { ref } from "vue"; // Storing all the country data export const countriesData = ref(); export const isLoading = ref(true); async function fetchData() { try { isLoading.value = true; const respon ...

javascriptvue.jsstore

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

After an error occurs, the Node.js Restify code will be executed

Within a Restify route, I have set up a router handler that calls a custom module for error checking. If the code encounters an error condition, it returns next(err) and displays the error message in the browser. However, the code does not stop executing a ...

javascriptnode.jsexpressrestify

"Utilize CSS Flexbox to create a layout with set width and uniform

Within a container, I have organized three sections. As I adjust the size of my browser to a maximum width of 668px, I want section 1 and section 3 to be displayed in one row while section 2 is placed below them. The width of section 2 should be proportion ...

htmlcssflexbox

Guidelines for showcasing validation summary on an ASP.NET webpage with the help of Javascript

My asp.net form contains multiple required fields that need validation. I am looking to display a summary of all validations at the end of the form. Valid input controls have already been checked, now I just need the summary. Here is an example code s ...

c#javascriptasp.net

Structure: Divergent Routes

I have been developing a form for my job, using some code I found online. The form starts by asking a simple question: Does the student have an ID? The answer is toggled between "YES" and "NO". If "Yes" is selected, the form will retrieve student informati ...

javascripthtmlforms

Guide to assigning unique identifiers to all elements within an array using JavaScript

I have an array of objects with numeric keys that correspond to specific data values. I am attempting to restructure this object in a way that includes an 'id' field for each entry. Here is the original object: [ { "1": "data1", "5": "d ...

javascriptarraysreactjsjson

NodeJS buffer is not capable of handling incomplete TCP stream data

While troubleshooting my TCP JSON stream on the live server, I discovered that if the data streamed to me in JSON format is excessive, it doesn't consistently parse correctly. It requires multiple streams for successful parsing. Here is the code I am ...

javascriptnode.jssocketstcp

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

Creating URL rewrite rules using parameter-based regex

My goal is to transform strings in the following format: "/folder/default.aspx?a=1&b=2&c=3" (example) into "/newfolder/?a=1&b=2&c=3" only if the URL contains "a=1" I am utilizing UrlRewritingNet for this task. ...

asp.netregexurl-rewriting

Insert multiple text box values as a new entry in an SQL database

Currently, I am implementing a code snippet to incorporate additional text boxes within a form. The main purpose is to enable users to input multiple languages they are proficient in. <script> jQuery(function($) { var i = 0; ...

javascriptphpjquerysqlajax

Subsequent requests experience delays in processing due to ASP.NET validation errors causing slowdowns

Our usual error logging system, NLog, was not capturing certain application errors. The only way to view these errors was through the Windows Event Viewer, where they appeared as warnings. It appears that the issue stems from a postback triggered by an asp ...

c#asp.netajaxwebforms