#css #vue.js #sass #safari
#CSS #vue.js #нахальство #сафари
Вопрос:
Обратите внимание, что это не потому, что css неверен или Safari не поддерживает эти правила, это не тот тип проблемы. Я могу снять флажок и проверить правило в инспекторе, и оно работает.
Я использую Vue с sass для своего веб-сайта. css отлично работает в любом другом браузере, но в safari есть несколько случаев, когда некоторые, казалось бы, случайные правила css не вступают в силу.
Первым примером является эта кнопка, которая включается при проверке ввода. 
В настоящее время кнопка имеет класс «отключено»
Когда я проверяю его, он удаляет класс disabled, что означает, что цвет фона будет зеленым, а цвет шрифта белым, это результат
Как вы можете видеть, цвет фона изменился, но шрифт остался черным. даже несмотря на то, что он был обновлен в инспекторе. В инспекторе, если я выключу и включу свойство цвета, оно обновится и будет правильным.
Я применяю эти стили стандартным способом, показанным ниже
button { border-radius: 4px; cursor: pointer; font-size: 16px; padding: 8px 12px; font-weight: bolder; display: flex; justify-content: center; align-items: center; background-color: $secondary-color; border: 1px solid $med-light-grey; color: $black; amp;.disabled { pointer-events: none; cursor: not-allowed; background-color: $light-grey; border-color: $med-light-grey; color: $off-black; } } Я применяю его к кнопке вот так
lt;button v-if="!loading" @click="initalise()" class="submit" :class="{ disabled: !agreed }"gt;Startlt;/buttongt; Класс действительно правильно применяется и удаляется в инспекторе, а цвет обновляется в любом другом браузере
Я в Safari версии 14.1, в новом частном браузере, без кэша, хранилища или чего-либо еще. Я не знаю, что может быть причиной этого.
Вот еще один пример, когда это происходит
Класс контента растягивается до 100%. Но когда я изменяю размер окна, делая его немного больше, div не растягивается вместе с ним, поэтому возникает пробел. Фон растягивается, как и должно быть, и заголовок над ним тоже. Если я просто сниму флажок и проверю правило отображения: сетка, все будет работать так, как должно, и я смогу свободно изменять размер, и div будет следовать.
Я не уверен, что это проблема с браузером или то, как построен мой веб-сайт, вот версии, которые я использую
"node-sass": "^5.0.0", "sass-loader": "^10.2.0", "vue": "^2.6.14" Любая помощь будет признательна
Комментарии:
1. Некоторые браузеры не поддерживают определенные свойства CSS!
2. @httpanand это не причина, так как свойство color поддерживается в Safari
3. Вы пробовали посмотреть на вычисленные свойства CSS, чтобы увидеть, откуда берутся стили?
4. @skyline3000 Я добавил немного кода к своему вопросу о том, какие стили применяются, все выглядит нормально
5. @Will я имею в виду, что в консоли разработчика есть раздел/вкладка для «Вычисляемых» стилей CSS, которые можно расширить, чтобы показать вам, какие стили вступают в силу. Иногда он захватывает информацию, неочевидную в инспекторе элементов.
Ответ №1:
Собираюсь ответить на свой собственный вопрос, это была проблема с кнопкой
pointer-events: none; свойство событий указателя, похоже, прослушивается в Safari, и это остановит обновление DOM правила цвета. Я нашел этот код, который повторяет проблему и исправит ее при удалении.
Я предполагаю, что 2-й пример, который я показал, делает то же самое с другим свойством, но это проблема в конце Сафари, поэтому для этого я просто перестрою html и css.
[codepen][1]