search

intel / appframework

The definitive HTML5 mobile javascript framework
http://app-framework-software.intel.com/
MIT License
2.43k stars 882 forks source link

Content in panel pushed up out of view after opening <select> #582

Closed asoyfer closed 10 years ago

asoyfer commented 10 years ago

After clicking on a select input in my ios7 simulator, the content at the top of the panel gets pushed up past the status bar and scrolling it back does not work. I also tested this with more lorum ipsum that pushes things off the page and after scrolling down as normal and opening the select the same thing happened and while the panel was "scrollable" it wouldn't reset to the correct position.

<!DOCTYPE html>

Hello World ```
```

After I open the select this sentence will get pushed to the top and I won't be able to scroll.
Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.

```
```

screen shot 2014-02-23 at 12 23 51 am

screen shot 2014-02-23 at 12 24 04 am

screen shot 2014-02-23 at 12 24 17 am

imaffett commented 10 years ago

Are you using Phonegap or something to wrap this?

Have you tested on an actual device?

asoyfer commented 10 years ago

Hi Ian,

I am wrapping this in Phonegap 3.3.0. and testing via the latest version of xcode. I just ran it on my iPad mini and got the same issue as on the iphone sim. I don't have this issue on desktop or on my android phone. I am not using any of the CSS or JS that come with the phonegap template but I did leave:

    <meta charset="utf-8" />

    <meta name="format-detection" content="telephone=no" />

    <!-- WARNING: for iOS 7, remove the width=device-width and

height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->

    <meta name="viewport" content="user-scalable=no, initial-scale=1,

maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

looked harmless enough though. Maybe this is also related to why the ios 7 status bar is already slightly encroaching on my header before I do anything?

On Mon, Feb 24, 2014 at 7:46 AM, Ian Maffett notifications@github.comwrote:

Are you using Phonegap or something to wrap this?

Have you tested on an actual device?

Reply to this email directly or view it on GitHubhttps://github.com/01org/appframework/issues/582#issuecomment-35882672 .

imaffett commented 10 years ago

Hi @asoyfer

Can you try running the kitchen sink app to see if it has the same problem? Go to Plugins->select box.

I tried that on my iPhone (7.0.6) and it works fine (didn't test an iPad). The header does scroll up at the start, then it comes back down when the select is closed.

asoyfer commented 10 years ago

Ian,

My iPhone simulator is showing iOS 7.0.3, but I can't imagine the incremental versions are making a difference. I tried with the Kitchen sink and I still have the issue. Here is a step by step of what I did and here is a look into the files I dropped into www of phonegap 3.3.0 - straight from the AFUI 2.0 download, this time I didn't leave any cordova html, JS, or CSS file that may have screwed things up:

screen shot 2014-02-25 at 1 56 26 am

KS home screen, note the issue with the status bar: screen shot 2014-02-25 at 1 56 01 am

Click plugins > af.selectBox:

screen shot 2014-02-25 at 1 56 39 am

Select menu comes up:

screen shot 2014-02-25 at 1 56 49 am

Click "Done" and still have issue.

screen shot 2014-02-25 at 1 57 01 am

Tomorrow I will have access to an iPhone 5S so I will try this again. Did you do anything else that was different besides running this on your phone instead of the sim? Are you on AFUI 2.1?

imaffett commented 10 years ago

@asoyfer

Sorry...I'm not understanding what the problem is. Everything looks fine. Can you circle where you are seeing issues?

Anything I see is related to the native container (the iOS title bar appearing over the header)

asoyfer commented 10 years ago

Ian,

The native container issue aside, look at the screenshot after the text "Click plugins > af.selectBox:". Notice the text about android. After clicking the select box and clicking done that text is scrolled out of view. If you look at the status bar in the last image you can just make out some of that text under it. It's impossible to scroll this text back into view. If you scroll and hold you see the text but as soon as you let go it scrolls away like the new position of the panel has been moved up by 30 px..

If that still doesn't make sense, I'm happy to make a short Youtube vid. Any tips on the native container issue in the meantime?

imaffett commented 10 years ago

Ok...now I understand what you are saying. The browser is "scrolling" the element into view, and since it's lower in the page, it has to scroll the div up.

Now to your problem, it's working fine for me. I can scroll the page back up...the scroller works fine on device. I tested on my iPhone 4s running iOS 7. I tested on an iPad mini (retina) and the select boxes are implemented differently, and never scroll up.

asoyfer commented 10 years ago

Thanks Ian, as I said I will test the Kitchen sink on an iPhone 5 and iPad mini (non-retina) later today. Please confirm for me that these steps make sense:

  1. Create new phonegap 3.3.0 project (I am using the CLI)
  2. Go into the www folder and delete everything (index.html, CSS and JS folder)
  3. Paste in everything from the appframework-2.0 folder that I downloaded from here
  4. launch to device or sim using CLI or directly by hitting run in Xcode

On Tue, Feb 25, 2014 at 10:38 AM, Ian Maffett notifications@github.comwrote:

Ok...now I understand what you are saying. The browser is "scrolling" the element into view, and since it's lower in the page, it has to scroll the div up.

Now to your problem, it's working fine for me. I can scroll the page back up...the scroller works fine on device. I tested on my iPhone 4s running iOS 7. I tested on an iPad mini (retina) and the select boxes are implemented differently, and never scroll up.

Reply to this email directly or view it on GitHubhttps://github.com/01org/appframework/issues/582#issuecomment-36020273 .

imaffett commented 10 years ago

Hey @asoyfer

I'm running 2.1, but it shouldn't be much of a difference. If it fixes it, then use that instead ;)

I've installed it via the CLI (cordova run ios) on the iPhone and iPad mini to test it...like I said, it works fine.

asoyfer commented 10 years ago

Just tried it with the master branch and it's fixed :)

Can you comment on the the native container issue that you can see on the other screens and also why the select element looks so dark:

screen shot 2014-02-25 at 1 18 28 pm

ghost commented 10 years ago

Hello, I am having this exact same issue but on Android 4.1.2

How did you managed to solve it? Just by upgrading app framework's version?