Slidedown instead of slideup animation on iphone

#1

I tried Safari and Firefox. For all controls I set display: ‘bottom’, animate: ‘slideup’ for xsmall viewport
However, it drops from the top for selects and ranges on my iphone6. What’s more interesting if I request ‘desktop version’ is starts working as designed but I don’t have a mobile version. No jquery-mobile or anything like this.
It also works as designed nice and smooth in chrome (emulating mobile devices in dev. console)
Am I missing something?

No js errors.

#2

Actually I’d rather describe it more like a flickering then sliding. When I click on a select the whole page scrolls from the top in an instant and then a select form pops-up. (kind of from the top)

Any known issues with bootstrap? Or I should add some mandatory styles like height: 100% or something

#3

I’ve spent the whole day narrowing it down.

I downloaded the example given here: https://demo.mobiscroll.com/jquery/select/basic# and modified it by adding a bunch of

elements right before the form and before the closing

so the content wouldn’t fit into a viewport.

What did I get:

Tapping selects which are inside the form causes the scrolling effect I initially described.
Non-form selects don’t act the same way. The page only flicks once and this is the way better behavior.

In my case selects are inside a form. How do I make them to act as if they are not.

#4

Thanks for the detailed description, I was able to reproduce it.
This only happens, if the select element is wrapped inside a label:

<label>
    Select
    <select id="test">
        ...
    </select>
</label>

A quick workaround is to use a div instead and a separate label element:

<div>
    <label for="test">Select</label>
    <select id="test">
        ...
    </select>
</div>

We will fix this in the upcoming release.

#5

We just released version 4.6.1, which solves this issue as well!

#6

Awesome! Good to know. The workaround worked for me as well.