[
https://issues.apache.org/jira/browse/CB-12811?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16011685#comment-16011685
]
Ashraf Yussouff edited comment on CB-12811 at 5/16/17 3:38 AM:
---------------------------------------------------------------
Hi [~kerrishotts] - I appreciate your quick response. As requested, I am
attaching 2 simple HTML pages that show the problem. Apologies for writing out
all these basic commands which you already know, I just want to show exactly
what I did.
Note: The second page has the CSS as well for fixing the header and footer.
On MacOS of course, do the following:
* Create a new Cordova app (e.g. the HelloWorld app)
* Add iOS platform
* Add InAppBrowser plugin
{noformat}
cordova create hello com.example.hello HelloWorld
cordova platform add ios
cordova plugin add cordova-plugin-inappbrowser
{noformat}
* In the 'www' directory, do the following:
** Please replace 'index.html' with the one attached here,
** Please put the 2nd attached file 'pageForIAB.html' in the 'www' directory as
well
* Now run the app with any emulator (problem occurs on any emulator or actual
device)
{noformat}
cordova emulate ios
{noformat}
* On the first page, click the "Open IAB" button to open the InAppBrowser window
* in the InAppBrowser window, you should see the fixed header, footer, and page
* Scroll down till you reach the input box, then click into it to give it focus
so that the keyboard appears below the window
* You should be able to see the problem now
was (Author: tabalchi):
Hi [~kerrishotts] - I appreciate your quick response. As requested, I am
attaching 2 simple HTML pages that show the problem. Apologies for writing out
all these basic commands which you already know, I just want to show exactly
what I did. On MacOS of course, do the following:
* Create a new Cordova app (e.g. the HelloWorld app)
* Add iOS platform
* Add InAppBrowser plugin
{noformat}
cordova create hello com.example.hello HelloWorld
cordova platform add ios
cordova plugin add cordova-plugin-inappbrowser
{noformat}
* In the 'www' directory, do the following:
** Please replace 'index.html' with the one attached here,
** Please put the 2nd attached file 'pageForIAB.html' in the 'www' directory as
well
* Now run the app with any emulator (problem occurs on any emulator or actual
device)
{noformat}
cordova emulate ios
{noformat}
* On the first page, click the "Open IAB" button to open the InAppBrowser window
* in the InAppBrowser window, you should see the fixed header, footer, and page
* Scroll down till you reach the input box, then click into it to give it focus
so that the keyboard appears below the window
* You should be able to see the problem now
> Plugin Inappbrowser on iOS - When keyboard appears, fixed divs are fixed to
> HTML page but not viewport
> ------------------------------------------------------------------------------------------------------
>
> Key: CB-12811
> URL: https://issues.apache.org/jira/browse/CB-12811
> Project: Apache Cordova
> Issue Type: Bug
> Components: cordova-plugin-inappbrowser
> Affects Versions: [email protected]
> Reporter: Ashraf Yussouff
> Attachments: index.html, pageForIAB.html, Screen Shot 2017-05-12 at
> 7.55.54 PM.png, Screen Shot 2017-05-12 at 7.56.21 PM.png, Screen Shot
> 2017-05-12 at 7.56.36 PM.png
>
>
> I am displaying an HTML form in the InAppBrowser. The page has a header fixed
> to the top and a footer fixed to the bottom using CSS (e.g. {position: fixed;
> top: 0px;}).
> When simply scrolling the page, the header and footer remain in place while
> the rest of the page moves.
> However, when an input receives focus and the iOS keyboard appears, the
> header and footer positions are only fixed with respect to the HTML page at
> the time the input received focus, but they are no longer fixed with respect
> to the viewport. As a result, if the page is scrolled up and down while the
> keyboard is open, the header and footer start moving along with the page.
> This behavior is not observed in the Safari mobile browser on the same
> device. On Safari, the header and footer remain in place while the rest of
> the page is scrollable when an input is clicked and the iOS keyboard appears
> below the browser.
> I will try to attach images if JIRA allows it after the issue has been
> created.
> NOTE: iOS is the only platform that I am working with, so I don't know if
> this issue occurs in other platforms as well. I am using plugin version 1.7.0
> and the Cordova versions I have seen this with are 6.4.0 and above.
--
This message was sent by Atlassian JIRA
(v6.3.15#6346)
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
