Jerky scrolling behavior on Firefox and mobile devices

[lpellegr]

When allowOutsideScroll is true and you tap on the element to display its dropdown-content and then scroll, the dropdown-content take a few milliseconds to realign, thus making the movement jerky.

I am able to reproduce the issue with iron-dropdown version 2.2.0 on Firefox but also Chrome on Android. That's really annoying, especially if the drop-down is kept open on a page for demo purposes. The behavior is too jerky.

The iron-dropdown demo page is a good place to reproduce the issue. Open it, move to "Scroll actions" example and click on "Refit on scroll" button. Then, scroll down and up several times.

Another example in a landing page:

https://noticeable.io

Look at the widget in the center when you scroll down and up.

This issue seems there since months. Any workarounds or ideas about the cause of this jerky movement on scrolling?

[lpellegr]

The following patch fixes the scrolling issue but breaks the positioning:

childdotorg@eba9a58

At first sight, the issue seems related to the fixed position of the host element.

[lpellegr]

@valdrinkoshi Any thoughts?

[valdrinkoshi]

The reason why is janky is because iron-dropdown is position: fixed and recomputes the position where it should be at each frame through a raf.
It is position: fixed because its positionTarget might be different from the offsetParent, and as a consequence we need to listen for scroll events and update positioning - scroll events are received after the fact happened, and on top of that we "deRAF" the position update (aka we do requestAnimationFrame(refit).

One possible improvement would be to set position: absolute if positionTarget === offsetParent (to be done in iron-fit-behavior), which would handle cases like this:

<style>
  .container { position: relative; }
</style>
<div class="container">
  <iron-dropdown allow-outside-scroll>

Would you be willing to give it a try? PR welcome!

A solution that works with current implementation is unset vertical/horizontal-align and position: absolute on the dropdown:

<style>
  .container { position: relative; }
  .container iron-dropdown {
    position: absolute;
    left: 0; /* vertical-align="left" */
    top: 0; /* vertical-align="top" */
  }
</style>
<div class="container">
  <iron-dropdown allow-outside-scroll horizontal-align="" vertical-align="">

[valdrinkoshi]

In terms of UX, <iron-dropdown> was conceived to behave as the native <select>: it either locks scrolling outside or closes on scroll outside (both supported through the scrollAction property.
allowOutsideScroll is something in between, for which one would be better off simply using position: absolute and do the actual positioning themselves:

<div style="position:relative">
  <div style="position: absolute; top: 0; left: 0">

[lpellegr]

@valdrinkoshi Thanks a lot for your explanations. I was able to understand and fix the behavior. If I find the time, I will look for the PR you have suggested.