Hello, I recently published my React website and noticed that any text that is opaque (opacity < 1) is not showing up. When I run it locally, it works fine, but when I published it via a git push, my issue arises. Any help would be greatly appreciated.
My website: https://jolly-poitras-00d5ec.netlify.app/
Picking appropriate titles for your posts makes it easier for people who experience the same issue to find this post and the solution quicker.
Netlify Domain
Git Repo
Deploy logs
Kyle.
Hey there, thanks for reaching out.
What you are describing sounds a bit like a an issue with case sensitivity on our system.
Can you give this a read through and let us know if that fixes the issue?
I have seen this opacity issue a few times on Netlify. As it turns out, it’s not a Netlify issue, but you’ve not really told us what part of the text is invisible for us to be able to check.
So, I’ll be telling you the same thing I had told other people. Something wrong happens during minification of the code. Suppose, you have something like opacity: 100% in CSS. While minification, the minifier compresses 100 to 1 but doesn’t remove the % sign. Thus in browsers, the code becomes opacity; 1% which is almost invisible. So, I’d say, if this is what happening with you, turn off minification (not recommend), or change your opacity value to 1 instead of 100%.