iOS Safari 奇怪的聚焦输入行为，集中输入聚焦

Question

在过去的几天里，我正在尝试解决仅在 iOS Safari 上发生的一个非常奇怪的问题。 （14/15 和 16+）

我会在这里发布一个视频片段来解释它。

错误行为：https://streamable.com/11l02b

正常行为：https://streamable.com/frg809

因此，正如您所看到的，有时（这种情况并不总是发生）专注于输入的 safari 会尝试将输入拉到中心，这会导致弹性和拉动刷新选项出现问题。

有什么建议可以彻底解决这个问题吗？预先感谢。

我尝试过在焦点不透明度为 0 时防止滚动，但没有帮助。

input:focus {
  animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.1s;
}

@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

另外，花了两天时间我发现关闭 PullToRefresh 可以完全解决这个问题。因为当专注于输入试图将屏幕居中但它会出现拉动刷新时会出现问题。

body { -webkit-overflow-scrolling: none; overscroll-behavior: none; }

但是过度滚动和拉动刷新完全消失了，这不适合作为解决方案，因为它破坏了正常的 iOS 用户行为

Answer 1

setBodyHeight函数使用jQuery的css方法将body的高度设置为窗口的innerHeight。

文档准备好后，最初会调用此函数一次来设置高度。 使用 jQuery 的 on 方法将事件侦听器添加到窗口的调整大小事件中，以便在视口大小发生变化（键盘出现或消失时发生）时动态调整高度。

        function setBodyHeight() {
            var bodyHeight = $(window).innerHeight();
            $('body').css('height', bodyHeight + 'px');
        }

        // Initial height setup
        setBodyHeight();

        // Update the height on resize
        $(window).on('resize', setBodyHeight);