It appears that the issue may lie in the incorrect application of the CSS file due to an improper HTTP header content-type, which should have a mime-type with an encoding parameter (text/css; charset: UTF-8) instead of an unknown value (css).
While Firefox overrides this incorrect content-type header by guessing the information, Chrome may not know what to do with a file of an unknown type if it respects the header as-is.
To troubleshoot, consider:
- Loading another CSS file from a different hosting source to see if it applies correctly.
- Adjusting or removing the problematic header on the server-side for proper rendering.
- Creating the stylesheet dynamically using JavaScript to bypass header issues.
I personally tried the third solution - fetching the CSS file using JS and creating a stylesheet with the response text, which worked successfully. However, I encountered a download attempt for an image due to an erroneous content-type header:
.logo {
background-image: url(../logo/images6.1624696593222.jpg);
The incorrect content-type header was observed for the image request as welll:
Request URL: https://greatone11.aroscop.org/logo/images6.1624696593222.jpg
content-type: text/html; charset=UTF-8
server: nginx/1.18.0
x-powered-by: Express
This suggests that the headers may be manipulated by either your expressjs server or nginx reverse proxy, with Express potentially configured for Angular resulting in conflicts with non-angular practices you are trying to implement.