Нажав кнопку Safari 5.1, выберите меню, обновив страницу
Это и вопрос, и ответ. Сегодня я столкнулся с проблемой, которую я никогда не видел за все свои годы в качестве веб-разработчика, поэтому я хотел поделиться этим решением с любым, кто может столкнуться с проблемой в будущем. Мне также интересно, если кто-то еще испытал это, и есть ли известная причина.
Проблема заключается исключительно в Safari 5.1 на Mac. Когда было выбрано раскрывающееся меню выбора, страница полностью обновится. После нескольких минут отладки я смог сделать вывод о том, что ошибка была вызвана... дождитесь ее... поместив границу css в поле выбора. (граница: 1px solid #ccc;)
WTF?
По-видимому, движок рендеринга Safari не любит этот стиль, и он просто обнажил всю страницу. Это был только Safari 5.1 (5.0.3 был в порядке) и только на Mac.
Это 100% воспроизводимое, когда это происходит, на нескольких приложениях в моей компании. Но это не на 100% воспроизводимо повсеместно, то есть я не могу просто пойти на какой-нибудь случайный сайт и запустить его. Это должна быть некоторая комбинация правил CSS или html-разметки, которые запускают ее.
Кто-нибудь еще видел это? Любое понимание того, какие конкретные условия могут вызвать это? Если нет, хорошо. Я сделаю это на ошибках браузера и оставлю это сообщение другому разработчику, чтобы найти, когда у них такая же проблема.
Ответы
Ответ 1
Окончательный ответ:
Я нашел окончательное решение проблемы, которую мы специально имели на нашем сайте. После загрузки сайта у нас есть библиотека TypeKit, прикрепляющая шрифты к странице. Когда я специально задал свойство font-family в блоках выбора для чего-то, кроме шрифта TypeKit, поведение обновления больше не отображается.
Я не уверен, что вы используете TypeKit или нет, но это будет хорошее место для поиска в первую очередь.
Исходный ответ:
Я столкнулся с этой проблемой и сегодня на одном из сайтов, которые моя компания работает. Я сузил его до набора правил CSS, которые, скорее всего, вызвали его (комментирование этих вопросов не вызвало бы ошибку при перезагрузке страницы).
Основная проблема, с которой я вижу, вполне может быть проблемой безопасности в самом браузере. Если у вас есть какие-либо открытые сеансы на любых вкладках, они также очистят свои данные сеанса.
Найдите страницу с этой ошибкой и откройте несколько других вкладок, в которые вы войдете в учетную запись Google или какой-либо другой набор учетных записей. Когда вы нажимаете на прямоугольники выбора на сайте с ошибкой, страница обновляется, а сеансы на других вкладках - reset.
Update:
Я сузил набор правил CSS, которые влияют на нашу страницу. Любой из этих правил CSS приведет к такому поведению:
- -webkit-внешний вид
- граница
- стиль границы
- граница радиуса
- -webkit-граница радиуса
- фон-повторить
- фон положение
- фонового изображения
Я изначально думал, что это свойство -background-image вызывает проблемы, поскольку мы используем образ данных вместо фактического png или jpg (чтобы придать стиль, похожий на значение по умолчанию в Firefox), но я, по-видимому, был не прав.
Обновление 2:. Я попытался использовать сброс CSS, чтобы вернуть все в исходное состояние, используя CSS-хакерство, специфичное для webkit, но просто касаясь любого из этих правил CSS, кажется, заставляет вещи пойти haywire. Я думаю, нам нужно будет просто удалить правила, пока не будет исправлено это.
Обновление 3: Кажется, что это связано с тем, что Javascript загружается на страницу. Если я отключу Javascript в Safari, этого не произойдет.
Ответ 2
Вы должны подать отчет об ошибке: https://bugs.webkit.org/
Таким образом, ошибка будет (надеюсь)! исправлена, чтобы будущие разработчики никогда не имели шансов на нее.
Эта проблема была исправлена некоторое время назад: https://bugs.webkit.org/show_bug.cgi?id=65350
Ответ 3
У меня тоже была эта проблема. Я решил это, удалив инструкцию "font-face" для всех выбирает
Ответ 4
Я также испытывал ошибку перезагрузки страницы/сессии.
Итак, вот что я нашел с некоторыми указателями из ваших ответов...
На странице я использовал GoogleFonts и применял CSS так:
body, p, ol, ul, td, input, textarea, select, option {
font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 12px;
line-height: 17px;
}
Кажется, Safari ненавидит, когда вы применяете веб-шрифты для выбора или тегов параметров. Изменение кода на этом затруднило проблему.
body {
font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
font-size: 12px;
line-height: 17px;
}
Ответ 5
Я тоже страдал от этого - ну, скорее, мой любезный босс Safari! Не верил, что это может быть, но в его браузере. Здесь больше подтверждения ошибки: http://redrata.com/2011/07/safari-woff-select-field-crash/
Надеюсь, они скоро исправит его, тем временем привязавшись к веб-безопасным шрифтам. Будет ли Chrome в порядке, поскольку он построен на WebKit тоже, или базы кода достаточно разные...
Ответ 6
У меня тоже такая же проблема, и я обнаружил, что основная проблема возникает из-за того, что CSS проверяет ваш CSS, чтобы остановить перезагрузку при нажатии на раскрывающийся список в MAC