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.
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.