Нажав кнопку 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