Question

我目前正在使用Google的Polymer项目开展项目。我遇到的问题只发生在iOS上的Safari中。在我正在处理的当前聊天视图中，当用户滚动聊天时，一切都很有效。当用户点击键盘时，这个间隙会粘住，很难摆脱。

请看下面的图片，如果有人能指出我正确的方向，将不胜感激。

我还有几张图片，但由于我的声誉低于10，我无法发帖。感谢大家提前寻求帮助。

Here is what happens after the keyboard has been opened and put away. You can see in the image that there is now a gap.

这是容器的CSS

.message-sender-container {
    @apply --layout-horizontal;
    @apply --layout-center;
    @apply --layout-around-justified;
    background: white;
    border-radius: 5px;
    max-width: 400px;
    margin: auto;
    position: sticky;
    position: -webkit-sticky;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    bottom: 2%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }

HTML：

<div class="message-sender-container">
  <paper-textarea id="message" label="Message..."></paper-textarea>
  <paper-button id="image-btn" on-tap="_onTapImageBtn" class="flex" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:insert-photo"></iron-icon></paper-button>
  <paper-button id="send-btn" on-tap="_onTapSendDialogBtn" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:send"></iron-icon></paper-button>
</div>

移动Safari - 底层导航问题 - CSS和聚合物

0 个答案: