Panel content is "scrollable" after opening select statement

[asoyfer]

Ian,

On the master branch with the slidemenu, scroller, selectBox, touchEvents, touchLayer, css3animate plugins. I have a panel and left side menu. The panel has a few buttons and select items. The items in the panel do not overflow the screen.

On android, when the app loads, swiping up or down on the panel does not trigger the kinetic scrolling effect but after opening a select menu and closing it, the whole panel is scrollable. It doesn't get stuck like before but it creates for a weird behavior when trying to open the left menu via swipe. I don't think this is the intended behavior as it does not happen in iOS.

I found that adding style="overflow:hidden" to the panel fixes this on android but sounds like a bug. Confirmed on iOS simulator, iPhone 5s, and android 4.4.

[imaffett]

Hi @asoyfer

Does it happen in the kitchen sink? If not, I need to see your demo, otherwise I can't help.

[asoyfer]

Hi Ian,

Just tested this with the KS, master branch, and yes it happens there too. To reproduce this issue I reduced the amount of content in the "webselect" panel so scrolling was not necessary to see everything in the panel. I reduced the HTML by remoing the last few items to:

                                <!-- Plugins> af.selectBox -->
                                <div title="Select" class="panel" id="webselect" scrolling="yes">
                                    <script>
                                        var init_select = function() {
                                            // $.selectBox.getOldSelects("selectTest");
                                            // $.selectBox.getOldSelects("selectTest2");
                                        };
                                        window.addEventListener("load", init_select, false);
                                    </script>On android devices, this will change select boxes to a custom control to fix a bug in Webkit with css3 transform3d.
                                    <br />
                                    <br />
                                    <div id="selectTest" style="-webkit-transform: translate3d(0, 0, 0)">
                                        <!-- content goes here-->
                                        <br>    <span>
                                            <select id="test" style="-webkit-appearance: listbox;">
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </span>
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                    </div>
                                    <div id="selectTest2" style="position:relative;top:10;">    <span>
                                            <select id="test2">
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                                <option value="11">1One</option>
                                                <option value="22">2Two</option>
                                                <option value="33">3Three</option>
                                                <option value="43">4Three</option>
                                                <option value="53">5Three</option>
                                                <option value="63">6Three</option>
                                                <option value="73">7Three</option>
                                            </select>
                                        </span>

                                    </div>

                                </div>

Swiping up or down before pressing anything in the panel did not cause the panel to scroll but after tapping on either of the two select statements (on separate occasions) the whole panel would then be scrollable with the kinetic effect. This does not happen on iOS. I noticed that in the Kitchen Sink the panel div has scrollable="yes", my original test with my own html did not have this but the bug remains so I'm not sure if that is relevant but wanted to point it out.

[imaffett]

Which device/OS are you testing on? You never reported that.

Also, if there isn't enough content to scroll, the page won't scroll (we disable it in the demo)...so I'm not sure I'm following what the problem is.

[asoyfer]

Ian,

that's exactly my point :) when there isn't enough content, the page should not scroll, but I found that on android 4.4 after interacting with a select element the page becomes scrollable. On iOS this does not happen so the issue is with android.

[imaffett]

@asoyfer

Ok...well can you atleast provide the following info?

Device OS Browser or Wrapper

There are guidelines for reporting bugs found on the main page

Please use github issues and file any bugs with the following

Any error messages from the console

Line numbers of offending code

Test cases

Description of the error

Expected result

Browser/Device you are testing on

[imaffett]

This is fixed in the 2.1devtf branch

[asoyfer]

Thanks Ian,

I'll follow the guidelines for future issues. On that subject, Should we report bugs only on master or on 2.1devtf as well? For example, although the scrolling issue is fixed, the the footer is now appearing at the top of the page for android 4.4.2 sim and 4.4 note 2 device in kitchen sink.

[imaffett]

You can report on master and 2.1devtf, but some stuff on master won't be fixed due to 2.1 hopefully being launched soon.

[asoyfer]

cool, thanks and keep up the good work. Really feel good about the potential of an AFUI app.