Блог

Главная - Вопросы по программированию - Стили CSS отображаются неправильно (firebase)

Стили CSS отображаются неправильно (firebase)

# #css #reactjs #firebase #mern

Вопрос:

Я развернул SPA в Firebase, и стили CSS выглядят хорошо только при обновлении браузера. Вот короткое видео, чтобы показать проблему:

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

Моя база данных.json:

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

Похоже, что проблема связана только с фоновым изображением, так как остальная часть приложения имеет правильные стили. Вот мой веб-сайт, чтобы вы могли проверить проблему: https://ligafiferos.web.app/61159918604c7700164465bd/players

Заранее благодарю вас!

Комментарии:

1. Вы получаете какие — либо ошибки в консоли ? Как будто CSS не найден или что-то в этом роде

2. Нет, у меня только эта проблема: страница или скрипт обращаются по крайней мере к одному из navigator.UserAgent, navigator.appVersion и navigator.platform. В будущей версии Chrome объем информации, доступной в строке Агента пользователя, будет уменьшен. Чтобы устранить эту проблему, замените использование navigator.UserAgent, navigator.appVersion и navigator.platform на обнаружение функций, постепенное улучшение или перейдите на navigator.userAgentData. Обратите внимание, что по соображениям производительности отображается только первый доступ к одному из свойств.

Ответ №1:

Не используйте background: white; .card (определено в Card.css ), используйте background-color: white (это то, что вы хотите изменить).

Изменение свойства ярлыка background изменяет все background-* свойства (в том числе background-image , для которого установлено значение initial ), а затем вы зависите от порядка загрузки CSS, чтобы он отображал фон или нет (что может зависеть от многих факторов).

CSS в консоли разработчика браузера

Если Card.css загрузится (по какой-то причине) после PlayItem.css этого , он отменит .elche-item__content свойство background-image и заменит его initial

Комментарии:

1. Большое спасибо! Это сработало для меня! 🙂

2. @сомневаясь в том, что это было правильное решение, не забудьте отметить его как решение, которое должны видеть другие

3. hecho, shur. Gracias y buen floro.

Метки: