1

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. enter image description here

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

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

JBrown
  • 825
  • 6
  • 22

2 Answers2

0

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>
Lionel-fr
  • 124
  • 1
  • 1
  • 5
  • I am using npm with React and it seems that when I run the command `npm run build` the `type=text/css` is removed from the link tag. Any thoughts on how to fix that? – JBrown Sep 22 '22 at 23:19
  • @JBrown did you solved it? I am facing same issue with my project (vue / vite), but also when I run npm run build, the type="text/css" is missing – Jozef Nov 25 '22 at 10:50
  • @Jozef yes I fixed it. See my answer below – JBrown Dec 19 '22 at 16:28
0

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.

JBrown
  • 825
  • 6
  • 22
  • interesting points, Thanks for sharing results concerning gap (or grid-gap) Safari does not support them in multi-column layout according to MDN [link](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) May be you could try using column-gap which Safari supports better accroding to MDN [link](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) except it does NOT take % or calc() – Lionel-fr Dec 19 '22 at 18:16