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

Question

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

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

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

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

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

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

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

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

Answer 3

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

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

Изменение пользовательских шрифтов в «Arial»

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

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

Надеется, что это помогает :)

Answer 4

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

Answer 5

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

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

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

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

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

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

Answer 6

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

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

Answer 7

Я был запущен в тот же вопрос недавно и нашел то, что фиксированный это в моем случае.

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

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

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