Mailing-List: contact issues-help@cordova.apache.org; run by ezmlm
Precedence: bulk
Date: Tue, 16 May 2017 03:39:04 +0000 (UTC)
From: "Ashraf Yussouff (JIRA)" <jira@apache.org>
To: issues@cordova.apache.org
Message-ID: <JIRA.13071708.1494634574000.217399.1494905944113@Atlassian.JIRA>
In-Reply-To: <JIRA.13071708.1494634574000@Atlassian.JIRA>
References: <JIRA.13071708.1494634574000@Atlassian.JIRA> <JIRA.13071708.1494634574173@jira-lw-us.apache.org>
Subject: [jira] [Comment Edited] (CB-12811) Plugin Inappbrowser on iOS -
 When keyboard appears, fixed divs are fixed to HTML page but not viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
archived-at: Tue, 16 May 2017 03:39:08 -0000


    [ 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: cordova@7.0.0
>            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: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org