Cordova/Phonegap IOS 键盘滚动问题，显示白色背景

Posted 2023-03-15

【中文标题】Cordova/Phonegap IOS 键盘滚动问题，显示白色背景

【英文标题】：Cordova/Phonegap IOS keyboard scroll issue, White background shown

【发布时间】：2017-09-25 19:15:18

【问题描述】：

我目前正在使用 Phonegap Build 进行开发。在 ios 上，当键盘显示并滚动视图以显示键盘当前位于前面时，视图似乎已损坏。当用户丢失并且键盘关闭时，它是固定的。

这个问题在应用程序的所有页面上都是一致的，我花了相当多的时间研究，但我找不到这个特定问题的任何答案，非常感谢任何和所有帮助。

配置如下所示。 下面的图片试图尽我所能展示这个问题。

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="current.id" version="1.0.2">
  <name>Foobar</name>
  <description>an application</description>
  <content src="index.html"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="14"/>
  <preference name="Fullscreen" value="flase" />
  <preference name="StatusBarOverlaysWebView" value="true" />
  <preference name="prerendered-icon" value="true" />
  <preference name="permissions" value="none" />
  <preference name="orientation" value="portrait" />
  <gap:config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true">
    <string>We are using the Camera for the profile picture..</string>
  </gap:config-file>
  <gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
    <string>We are using the Camera for the profile picture..</string>
  </gap:config-file>
  <feature></feature>
  <plugin name="cordova-custom-config" source="npm" spec="~4.0.2" />
  <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>
  <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>
  <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>
  <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>
  <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>
  <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>
  <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>
  <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>
  <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>
  <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>
  <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>
  <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>
  <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>
  <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>
  <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>
  <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>
  <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

第一步：Image 1, Focus on the input.

第二步：Image 2, Scrolling slightly down while still focused on the input.

继续滚动会导致整个视图显示为白色，除了最底部的提交按钮。

然后我可以点击背景/失去焦点，背景和输入将重新加载。

感谢您的帮助！

【参考方案1】：

我认为这是一个 CSS 问题，而不是科尔多瓦配置。每当键盘出现时，iOS 默认会处理 web 视图滚动。因此，如果您有任何额外的 css 来处理键盘显示上的页面滚动，请删除它。

【讨论】：

感谢您指出我正确的方向，我认为问题是由于滚动时正在计算的位置，当您打开键盘时不会发生这种情况。