3

I encountered a very strange behaviour in my ionic/cordova app on the windows phone 8.1 platform, where i implemented an instant messenger. I teared my whole application down to a simple cordova (starter) application to eliminate potential side effects with other app related code like other css classes for example. But the issue still remains...

The issue

My app contains an html input element at the bottom of the page, where the user can enter a text for text-messaging. Whenever this input gets focused, the keyboard (inputpane) appears. But after the first focussing (by clicking the 2nd++ time), the input shifts up too far or gets pushed away by the keyboard. These are the screen captures:

  1. Everything is fine on first focus:

enter image description here

  1. Hiding the Keyboard by pressing "back button" and refocussing the input leads into that:

enter image description here

It seems like the whole application gets pushed away by the keyboard out of the screen, since the header bar disappers as well. After tapping on the screen, the view renders correctly (Picture 1), but the usability remains still like a mess. I only figured out, that the space below the input element belongs to the <body> of the DOM.

What i did so far

I started with creating a plain cordova app to narrow down all potential side effects and error sources (Source code on my Github). This was my procedure:

  1. Created a new cordova application with cordova 5.1.1
  2. cordova platform add wp8 & cordova build wp8
  3. Opened the wp8 project file with Visual Studio 2013 and upgraded to a windows phone silverlight 8.1 application (see picture below), because this is a requirement by our app

enter image description here

  1. And started to copy the essential html/css/js code to reproduce the issue in the plain application with:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>Hello World</title>
  </head>
  <body>
    <div class="bottom">
        <input type="search" placeholder="Search">
    </div>
  </body>
</html>

CSS

.bottom {
  position : absolute;
  right    : 0;
  left     : 0;
  bottom   : 0;
}

input {
  background-color: pink;
  width: 100%;
}

Result

First of all, I thought the problem disappeared. But after some trying I encountered the same behaviour again. It happens quite rarely but still (only once in ~30 times). For me this was the evidence, that for example ionic is not responsible for this issue (see picture below):

enter image description here

It already took days and hours to investigate this behaviour and to try all potential solutions i have found in the world wide web until today. These are for example:

Additionally i installed WEINRE to debug my web related code on the windows phone 8.1 device (Nokia Lumia 930) with minor success. The same issue also appears in a simulator. I can only image, that upgrading to a silverlight 8.1 app is the essential breaking changer.

Community
  • 1
  • 1
Beat
  • 4,386
  • 2
  • 35
  • 52
  • I added the source code of the blank cordova application to my github account [LINK](https://github.com/beat-at-hartwig/wpBug) – Beat Nov 26 '15 at 09:55

1 Answers1

0

Have you tried using this $ionicConfigProvider.scrolling.jsScrolling(false) ? In order to enable the native scrolling. I have the exact same issue.

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.scrolling.jsScrolling(false);
 
  // Or for only a single platform, use
  // if( ionic.Platform.isAndroid() ) {
    // $ionicConfigProvider.scrolling.jsScrolling(false);
  // }
}
josue quesada
  • 31
  • 1
  • I actually changed my platform target to `windows` instead of `wp8`. That helped. I am using `$ionicConfigProvider.scrolling.jsScrolling( true );` by the way and it is working. Seems like you have a different problem… – Beat Jul 20 '16 at 16:05