Блог

Я только что закончил работу над веб-страницей и решил развернуть ее на страницах GitHub с помощью Yarn. Проблема в том, что все выглядело хорошо, когда оно работало на localhost, но некоторые вещи не отображались корректно в развернутой версии в моем браузере.

Я тестировал его в браузерах:

1. Google Chrome 86.0.4240.193
2. Safari 13.1

В обоих случаях возникла одна и та же проблема. Вот несколько скриншотов сравнения при запуске на локальном хостинге и в Сети:

Localhost:

В сети:

На втором есть едва видимый контур моих кнопок. Я думал, что некоторые из моих CSS, возможно, вызвали это, поэтому вот также мой стиль для этих кнопок:

 .button {
    width: 29vw;
    height: 40vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    border: 3px solid black;
    border-radius: 10px;
    outline: none;
    padding: none;
    cursor: pointer;   
    opacity: 70%;
    font-family: myFont;
    font-size: 6vh;
    color: black;
}

.button:hover {
    opacity: 100%;
    animation: swing 1s;
}
  

Есть идеи, почему это происходит? Спасибо за любую помощь.

Поиграв некоторое время со своим CSS, я обнаружил, в чем проблема, и смог ее исправить. Действительно, мои первоначальные мысли были правильными, и непрозрачность вызывала эту проблему.

Если у кого-то еще есть такая же проблема, вот быстрое решение. Просто перейдите с:

 opacity: 70%;
  

Для:

 opacity: 0.7;