How to fix CSS styling issues on Safari and Firefox

Question

I built this e-commerce site for a client using ReactJS and deploying via Netlify automatic github deploys. I'm getting very strange results in Firefox and Safari (Big Sur and before). This error appears in the Safari console:

Did not parse stylesheet at 'https://panthercityleather.com/src/index.css' because non CSS MIME types are not allowed in strict mode.

I'm assuming this is what is causing the layout issues? I tried to add type=text/css to all links and style tags but the command npm run build seems to remove these attributes from the tags.

I then locally ran npm run build (as opposed to letting Netlify automatically build), edited the build css to contain the correct MIME types, added autoprefixing to all of the css, and manually deployed this build folder to Netlify. Then I got a different error in regard to the index.css file:

Failed to load resource: the server responded with a status of 404 ()

I am completely lost at this point and would really appreciate any help. The layout issues only seem to arise on desktop Safari and Firefox and the issues are different in each browser. Here is an example from the home page:

Featured items on Chrome. Everything looks correct.

Featured items on Firefox. Note that the spacing between the headings and the images is too tight but the images are cropped correctly.

Featured items on Safari. Note how the images are now cropped wrong but the spacing is correct.

Answer 1

Maybe try adding type="text/css" to every link or style tag.

<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" > ... </style>

Answer 2

Turns out I had 2 issues:

1. I was linking index.css inside of index.html but with a React app this is not necessary. I simply need to import each css file into the react file that references it. This solved the error that I initially posted the question about but did not fix the weird styling behavior on other browsers.

2. My main issue was that my css was simply not supported on older browser versions. Specifically, aspect-ratio and gap did not have good support. I used the padding-top hack to provide a fallback for aspect-ratio . I simply removed all gap in my css because on Safari v14, the browser apparently supports gap but none of the styles were being applied. I've spent all day scouring the internet so I simply replaced all gap with something like this:

& > * + * {
  margin-left: 1rem;
}

This applies a 1rem margin on all but the first element in a flex row. Change to margin-top for a flex column.