Search code examples
cssreactjsfirebasemern

CSS styles not displaying properly (firebase)

I deployed a SPA in Firebase and the CSS styles only look good when I refresh the browser. Here is short video to show the issue:

https://www.youtube.com/watch?v=dIuQ-axizj8

My firebase.json:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

It seems that the issue is only related with background image since the rest of the application has the correct styles. Here is my website so you can verify the problem: https://ligafiferos.web.app/61159918604c7700164465bd/players

Thank you in advance!

Solution

  • Don't use background: white; on .card (defined in Card.css), use background-color: white (which is what you want to change).

    Changing the shortcut property background changes all background-* properties (including background-image, which is set to initial), and then you depend on the order of CSS loading to have it show the background or not (which may be dependent on many things).

    CSS on browser dev console

    If Card.css gets loaded (for some reason) after PlayItem.css, then it'll cancel the .elche-item__content property background-image and replace it with initial