Safari джиттер / джампинг (ошибка?) При первом «фокусном» событии загрузки страницы

Question

В настоящее время я борюсь с очень расстраивающей ошибкой в ​​Safari, и я не уверен, куда еще обратиться.

Кажется, большинство элементов (но не все, и я не могу различить дифференцирующий фактор), которые вызовут событие focus, заставят все элементы на странице, которые были перемещены или анимированы, перепрыгнуть ~ 2 пикселя вверх и влево. И это происходит только при первом событии фокуса после загрузки страницы.

Это немного раздражает, когда я вижу ошибку, так как она находится в зарегистрированной части droplr.com , и мне совершенно не удалось разобрать более простой случай на JSFiddle.

Если у вас есть / создайте учетную запись и войдите в систему, нажмите на этот значок редактирования для выпадения:

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

С большим количеством капель это просто больше того же самого, но, кажется, оно составляет максимум около 40 красок. И профилировщик не предлагает ничего гнусного. Просто путешествие по внутренним компонентам jQuery.

Если вместо размещения элементов через translate3d или matix3d я просто использую top и left, эта ошибка исчезнет. После нескольких часов отладки я в полной растерянности.

Надеясь, что кто-то видел что-то подобное, мог взглянуть или мог бы дать мне совет по отладке следующих шагов.

Большое спасибо!

Обновление: Дейв Десандро предложил , это было 3-е ускорение, так что я попробовал его с translate и, конечно же, это не вызвало дрожание , Я понятия не имею, почему аппаратное ускорение запускается с событием focus и только один раз.

Я пытался установить transformZ 0 при загрузке страницы, чтобы продвинуться вперед и нарастить аппаратное обеспечение, но там тоже не повезло. Любые другие идеи приветствуются.

Answer 1

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

Убедитесь, что у вас нет hide () и show () для того же элемента в следующей строке или наоборот. Пример: el.show () el.hide ()

Изменить пользовательские шрифты на "Arial"

Для элементов, которые вы не хотите фокусировать, добавьте этот код внизу ваших скриптов: noFocusElem.off('focus'); Это позволит удалить все обработчики фокуса, которые вы могли добавить по ошибке

Наконец, поместите свой CSS перед любыми скриптами. Это известный факт, что добавление правил CSS после применения встроенного стиля может вызвать дрожание, особенно если вы используете свойство line-hieght

Надеюсь, это поможет:)

Answer 2

Недавно я столкнулся с той же проблемой и нашел что-то, что исправило ее в моем случае.

Проверьте все, что скрыто за кадром, например:

text-indent: -9999px;
left: -9999px;

Удаление любого экземпляра из ускоренных элементов 3d (включая дочерние) остановило скачок фокусировки для меня.

Answer 3

Я не проверял это, поэтому я буду очень удивлен, если это работает ... но вот идея:

$(document).ready(function() {
  $(document).focus(function(e) {
    e.preventDefault();
  });
  $(document).click(function() {
      $(document).unbind();
  });
});

Answer 4

Просто мой 2с стоит.

Первое, что я бы попробовал: Сначала в Chrome, нажмите «about: flags» (да, я знаю, что вы не используете Chrome). Найдите 'Составные границы слоя рендеринга' и включите его. Как только эта функция будет включена, вы получите приблизительное представление о том, что визуализируется / аппаратно ускоряется.

См .: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

и ищите любые проблемы рендеринга. Обычно они вызваны z-индексами. Поиграйте с любыми z-индексами и скрывайте / показывайте определенные элементы, пока проблемы рендеринга не будут решены. Тогда работай оттуда. Хакеры и непрозрачность translate-z также могут вызвать проблемы.

По своему опыту я обнаружил, что проблемы с рендерингом в других браузерах webkit можно диагностировать с помощью chrome. Мерцание - обычное явление в стандартном браузере Android.

Во-вторых: посмотрите на само событие фокуса и попробуйте такие вещи, как предотвращение поведения по умолчанию. Для меня это похоже на длинный выстрел, но попробуй.

Answer 5

Способ не тратить время на исправление подергивания времени загрузки; Вы можете установить страницу скрытой, а затем сделать элементы видимыми при загрузке. Если ваша страница загружается медленно, вы можете захотеть, чтобы спиннер по умолчанию был видимым, а затем загрузите его скрыть. Тогда вы могли бы вернуться к проблеме, когда вам нечего делать.

Answer 6

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

Может быть, в качестве отправной точки вернемся к Chrome и посмотрим на композитный слой:

Ударьте это в адресную строку: о: флаги

Вы сможете включить составные границы изнутри. Красные границы обычно указывают на проблему рендеринга:

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Время от времени я обнаруживал, что, хотя в Chrome есть проблемы с рендерингом, браузер отлично справляется с тем, что скрывает их от меня. Однако в других браузерах, основанных на webkit, результат может быть более заметным (например, android).

Я также видел мерцание, когда z-индексы используются в связи с трансформируемым контентом.

В любом случае было бы здорово узнать, как вы решили эту проблему (если вы это сделали). Разместите ответ на свой вопрос?

Answer 7

Это случалось при использовании пользовательских наборов шрифтов. Может ли это быть проблемой? Некоторые события приводят к перерисовке пользовательских шрифтов, что может привести к очень небольшому «дрожанию» при отображении страницы.

Иногда ручная установка высоты и ширины всех родительских элементов HTML может уменьшить мерцание.