CSS вводит неправильный элемент только в Safari - PullRequest
0 голосов
/ 03 марта 2020

Таким образом, возникла действительно странная проблема, только в Safari 13.0.5, протестированная на нескольких машинах и получившая одну и ту же ошибку.

Сам проект представляет собой сетевое приложение, построенное с Laravel с использованием Laravel Смешайте для компиляции ресурсов.

У меня есть форма с идентификатором profileForm:

<form id="profileForm">
... inputs
</form> 

В этой форме используется стиль формы по умолчанию, который я создал для этого проекта - который работает нормально.

Однако странно то, что некоторые стили из медиазапроса из совершенно отдельного элемента применяются здесь?

.profile-modal {
      .. other styles
      @media screen and (min-width: 768px) {
        padding-left: 70px !important;
        padding-right: 70px !important;
      }
    }

Эта форма не имеет класса .profile-modal, однако Safari применяет к нему вышеуказанный стиль, предназначенный для совершенно отдельной части веб-сайта.

Если я переименую класс в sass к чему-то совершенно случайному, то есть:

.asdfghjkl {
          .. other styles
          @media screen and (min-width: 768px) {
            padding-left: 70px !important;
            padding-right: 70px !important;
          }
        }

Он все еще применяет эти стили к этому элементу, как видно здесь

Для борьбы с этим я подумал, что В качестве временной меры я мог бы добавить следующее в свой шаблон лезвия, чтобы удалить заполнение:

<style>
    .profile-modal{
        padding-left: initial !important;
        padding-right: initial !important;
    }
</style>

Однако это не относится к сломанному элементу, чтобы заставить его работать, я должен использовать правильный идентификатор #profileForm.

Кто-нибудь еще имел эту проблему в последней версии Safari?

...