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

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

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

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

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

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Возможно, в качестве отправной точки вернитесь к хромированию и посмотрите на составное изображение:

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

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

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

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

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

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

Ответ 4

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

Ответ 5

Только мой 2c стоит.

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

Смотрите: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

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

Из опыта, который я нашел, проблемы с рендерингом в других браузерах webkit можно диагностировать с использованием хрома. Мерцание - обычное явление в браузере Android.

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

Ответ 6

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

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

Ответ 7

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

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

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

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