Дергается div блок только в Google Chrome и IE и только при скролле мышью. Почему?

Question

[Maatthew Patell]

Написал плагин "липких блоков" для jQuery. Все работает на первый взгляд отлично но, при прилипании и отлипании блока видно едва заметное дергание. Особенно если скролить снизу вверх. Если использовать ползунок браузера, такого не наблюдается. Причем в мозиле даже со скролом через колесо мыши ничего не дергается.
Почему же он дергается, да еще и только при скролле мышью?
P.S. Сразу скажу что используемый throttle никак на это не влияет.
Ссылка на обсуждаемое: matthewpattell.github.io/sticky-float

Comments

[IceJOKER]

телепаты......

[Mikhail Osher]

Ссылку на plunker в студию.

[Maatthew Patell]

Mikhail Osher: забыл добавить)) вопрос дополнил.

[Maatthew Patell]

IceJOKER: забыл добавить)) вопрос дополнил.

[IceJOKER]

Maatthew Patell: полагаю проблема в smoothe скроллинге, у хрома он происходит грубо, проскакивает несколько пикселей и поэтому блок прилипает поздно, а при скроллинге с помощью скролла, все происходит гладко.
это поверхностная оценка

[Maatthew Patell]

IceJOKER: что можно сделать?

[IceJOKER]

Maatthew Patell: я уже понял в чем проблема и исправил, сейчас разберусь с git и дам знать

[Maatthew Patell]

IceJOKER: ок, жду)

Answer 1

[IceJOKER]

https://github.com/IceJOKER/sticky-float - держите, дайте знать помог или нет

Comments

[Maatthew Patell]

IceJOKER: все равно дергается, все без изменений( Я думаю дело не в width элемента...

[IceJOKER]

Maatthew Patell: дело в нем, вычисление outerWidth и занимало время, если его закомментировать прилипало без дерганий , поэтому перенес его выше, чтоб заранее вычислял . можете показать сайт , чтоб я у вас проверил, т.к. у меня локально все ок

[Maatthew Patell]

IceJOKER: https://youtu.be/zUNnVuRTpMg

[Maatthew Patell]

IceJOKER: на видео, особенно синий блок при отлипании снизу

[IceJOKER]

Maatthew Patell: видео ничем не поможет, скиньте страницу(залейте на jsfiddle что ли)

[Maatthew Patell]

IceJOKER: codepen.io/matthew_patell/pen/zqQEaB
комментирование outerWidth не помагает. Отчетливо это видно на синем блоке при отлипании снизу.

[Maatthew Patell]

IceJOKER: да и при прокрутке сверху тоже подергивается

[IceJOKER]

Maatthew Patell: ну там исходный код, а не моя правка, https://raw.githubusercontent.com/IceJOKER/sticky-... - скопируйте туда этот код и попробуйте, у меня все работает нормально

[Maatthew Patell]

IceJOKER: скопировал, тоже самое) Что за чудеса... Уже который день бьюсь над решением...

[IceJOKER]

Maatthew Patell: скопировали и не работает? скиньте ссылку, у меня на исходном дергается, а мой вариант работает нормально

[Maatthew Patell]

IceJOKER: ссылка та же: codepen.io/matthew_patell/pen/zqQEaB
синий блок когда отлипает при скролле вверх дергается...

[Maatthew Patell]

IceJOKER: причем я заметил через раз такое может быть. Особенно когда вверх не медленно, а быстро крутить, т.е. чем быстрее скролл вверх тем больше вероятность дергания.

[IceJOKER]

Maatthew Patell: у меня дергается лишь если очень быстро скроллить, но этого делать вряд ли кто будет, при таком скролле за доли секунды идет десятки операций, вот и не успевает.
в исходнике именно вычисление ширины занимало много времени, после изменения с нормальным скроллом он стал работать прекрасно, нет разве?

[Maatthew Patell]

IceJOKER: да, возможно. У меня иногда даже не при быстром дергается. Все-таки хотелось идеальную реализацию без дерганий сделать, так сказать)) Ну да ладно, может когда-нибудь придет озарение)

[IceJOKER]

Maatthew Patell: вы можете еще вычисление высоту у родителя вытащить в init, если он не динамичный.

[Maatthew Patell]

IceJOKER: нужно опцию такую сделать)