Stylesheet doesn't load,seems related to strict mime checking

Have a page that works on my machine, but when viewed through Cloudflare, the stylesheet doesn’t load in Chrome or Firefox, but does in Edge. Webhint says “Refused to apply style from ‘https://www.sizes.com/units/////////styles/units.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.”

Notice the weird URI. The stylesheet is loaded from a relative address, namely href="…/styles/units.css" But there is no “https://sizes.com/units/styles/units.css”; units and styles are both folders one level above the root.
Any ideas? I am baffled.

Would you mind sharing the exact URL you are encountering this error?

The exact url: [https://www.sizes.com/units/bahr.htm]

Can’t reproduce the issue. I the this:
image

No weird slashes and no wrong content-type. Please clear all your caches and try again in an anonym tab.

M4rt1n, thanks for the help, but you are looking at the wrong page. There is nothing technically wrong (that I know of) with the stylesheet page (tho the css isn’t so great). Cloudflare successfully serves it to thousands of pages every week. The problem is that something in the bahr page causes Cloudflare to provide the bahr page without the stylesheet.
In investigating this I have already purged the bahr page and the stylesheet page. No joy.
FWIW, the bahr page is an experiment in using the HTML element dialog, though that may be totally irrelevant.

I haven’t been clear about the problem. In the page, following the word Iran, is a globe icon. Clicking on the icon brings up a modal box with a black background displaying a world map. This always happens on the development system, on all browsers.

Here is what happens, trying to open this page from Cloudflare on different browsers. (11:26am June 9)

What you see in Chrome:
Page is now displaying correctly in Chrome. I have no idea what changed.

What you see in Firefox:
Click on the globe icon next to Iran. The dialog box with a map appear, but with a white BG. What has happened is that the units.css stylesheet was not retrieved and the browser has substituted the Mozilla user-agent stylesheet.

What you see in Edge:
The page opens on an enormous tweet bird. The css sizing this svg (and all other styling) is missing.

For me that sounds like a browser related issue and not like a Cloudflare related one. But since I can’t reproduce I can’t tell for sure.

All this indicates to me, that you should use “autoprefixer” for your CSS

Autoprefixer is another tool for “making it compatible with all browsers” and even covers older versions of any browser

If you can modify your code, please try: https://autoprefixer.github.io to update your CSS, then try again.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.