При нажатии на Safari 5.1 выберите меню обновляет страницу - PullRequest
Новая
       34

При нажатии на Safari 5.1 выберите меню обновляет страницу

15 голосов
/ 23 августа 2011

Это и вопрос, и ответ. Сегодня я столкнулся с ошибкой, которую никогда не видел за все свои годы в качестве веб-разработчика, поэтому я хотел поделиться этим исправлением со всеми, кто может столкнуться с этой проблемой в будущем. Мне также любопытно, испытал ли это кто-нибудь еще, и есть ли известная причина.

Эта проблема относится только к Safari 5.1 на Mac. При нажатии на раскрывающееся меню выбора страница полностью обновляется. После нескольких минут отладки я смог сделать вывод, что ошибка была вызвана ... ждать ее ... помещением границы css в поле выбора. (граница: 1px solid #ccc;)

WTF

Очевидно, движку рендеринга Safari не нравится этот стиль, и он просто обнажает всю страницу. Это был только Safari 5.1 (5.0.3 был в порядке) и только на Mac.

Воспроизводится на 100%, когда это происходит, в нескольких приложениях в моей компании. Но это не на 100% воспроизводится повсеместно, то есть я не могу просто зайти на любой случайный сайт и запустить его. Это должна быть какая-то комбинация правил CSS или HTML-разметки, которая запускает ее.

Кто-нибудь еще видел это? Любое понимание того, какие конкретные условия могут вызвать это? Если нет, то ладно. Я расскажу об этом как об ошибке в браузере и оставлю этот пост другому разработчику, чтобы узнать, когда у него возникла такая же проблема.

Ответы [ 6 ]

8 голосов
/ 24 августа 2011

Окончательный ответ:

Я нашел окончательное решение проблемы, с которой мы столкнулись на нашем сайте.После загрузки сайта у нас есть библиотека TypeKit, которая прикрепляет шрифты к странице.Когда я специально устанавливаю для свойства font-family в полях выбора значение, отличное от шрифта TypeKit, поведение обновления больше не проявляется.

Я не уверен, используете ли вы TypeKit или нет, ноэто было бы хорошим местом для поиска в первую очередь.

Оригинальный ответ:

Я также столкнулся с этой проблемой сегодня на одном из сайтов, на которых работает моя компания.Я сузил его до набора CSS-правил, которые, скорее всего, вызывали его (комментирование этих правил не приведет к ошибке при перезагрузке страницы).

Основной проблемой, с которой я сталкиваюсь, может быть безопасностьпроблема в самом браузере.Если у вас есть какие-либо открытые сеансы на каких-либо вкладках, он также очистит их данные сеансов.

Найдите страницу с этой ошибкой и откройте несколько других вкладок, где вы входите в учетную запись Google, или какой-либо другой наборсчетов.Когда вы нажимаете поля выбора на сайте с ошибкой, страница обновляется, и сеансы на других вкладках также сбрасываются.

Обновление: Я сузил наборправил CSS, которые влияют на нашу страницу.Любое из этих правил CSS будет вызывать такое поведение:

  • -webkit-Appearance
  • border
  • border-style
  • border-radius
  • -webkit-border-radius
  • background-repeat
  • background-position
  • background-image

У меня было изначальноподумал, что именно свойство -background-image вызывает проблемы, так как мы используем data image вместо реального png или jpg (чтобы придать стиль, похожий на стиль по умолчанию в Firefox),но я, по-видимому, ошибался.

Обновление 2: Я попытался с помощью сброса CSS вернуть все в нормальное состояние с помощью специфичного для webkit CSS-хака , но просто коснулся любогоиз этих правил CSS, кажется, дела идут не так, как надо.Я думаю, нам нужно будет просто удалить правила, пока не будет исправлено это.

Обновление 3: Кажется, это как-то связано с загрузкой Javascript на странице.Если я отключу Javascript в Safari, этого не произойдет.

6 голосов
/ 23 августа 2011

Вы должны подать отчет об ошибке: https://bugs.webkit.org/

Таким образом, ошибка (надеюсь!) Будет исправлена, так что будущие разработчики никогда не столкнутся с ней.

С тех пор эта проблема была исправлена: https://bugs.webkit.org/show_bug.cgi?id=65350

4 голосов
/ 03 октября 2011

У меня тоже была эта проблема. Я решил это, удалив инструкцию 'font-face' для всех select

3 голосов
/ 26 августа 2011

У меня также была ошибка перезагрузки страницы / очистки сеанса.

Итак, вот что я нашел с некоторыми указателями из ваших ответов ...

На странице я использовал 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;
}
2 голосов
/ 24 октября 2011

Я тоже страдал от этого - скорее мой босс, любящий Safari, тоже! Не верил, что это может быть, но в его браузере. Здесь больше подтверждений ошибки: http://redrata.com/2011/07/safari-woff-select-field-crash/

Надеемся, что они скоро это исправят, а пока придерживаются безопасных веб-шрифтов. Будет ли Chrome нормальным, поскольку он также построен на WebKit, или базы кода достаточно разные ...

0 голосов
/ 16 июля 2013

У меня тоже такая же проблема, и я обнаружил, что основная проблема возникает из-за того, что CSS проверяет ваш CSS, чтобы остановить перезагрузку при нажатии на выпадающий список в MAC

...