iOS Chrome/Safari - 聚焦模态内的输入时不需要的滚动

Question

在 Safari 和 Chrome 中测试 - 结果相同，所以我认为这是 iOS 问题。

只有在模态框内有输入并且我点击该输入时才会发生这种情况。在同一时刻，该输入获得焦点并且本机 iOS 键盘变得可见。

模态下方的页面在同一时刻自动滚动到其高度的 50%。这种行为是完全不需要的，我不知道如何防止这种默认 iOS "feature".

演示：

更新：修复提交：limonte/sweetalert2/commit/4a2d36b

Answer 1

在 iOS 我遇到了由 setTimeout 和 setInterval 引起的滚动事件的问题（定位模态导致滚动？）。我在某处使用以下代码找到了解决方案。

Function.prototype.bind = function(parent) {
  var f = this;
  var args = [];

  for (var a = 1; a < arguments.length; a++) {
    args[args.length] = arguments[a];
  }

  var temp = function() {
    return f.apply(parent, args);
  }

  return(temp);
}


setTimeout(function() {
  // your animation stuff here
}.bind(this), 100);

Answer 2

我在这里想到的一件事可能是将 Fast Click 库添加到您的代码中。一些 iOS 和 Android 超时问题，例如 300ms 延迟，由 Fast Click 处理。值得一试

Answer 3

我们在工作中遇到了类似的问题，我在您的（出色的）演示页面上偶然发现了这个问题。

如您所述，偏移量始终为页面高度的 ~50%，无论您的初始偏移量位于何处，都会发生这种情况。

过去，当我观察到与早期 iOS 版本类似的 "jumping"（尽管跳跃不那么明显）时，我通常会通过应用 position: fixed（或 relative) 到 body (this allows overflow: hidden to properly work).

但是，如果用户向下滚动，这会导致用户跳回到页面顶部的无人值守的后果。

所以，如果您愿意与一些 JavaScript 一起解决这个问题，这里是我整理的 fix/hack：

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

以及 CSS 的样子：

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

这是您的演示页面的分支，用于说明：https://jpattishall.github.io/sweetalert2/ios-bug.html

对于那些正在寻找更通用的修复方法的人，当 opening/closing 模态时，您可以执行以下操作：

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

编辑：需要注意的一件事是我们没有盲目地将修复应用到所有 devices/platforms，只是 iOS Safari。我在你的另一个问题中注意到你不喜欢溢出：由于滚动条 appears/disappears 时页面的移动而隐藏（我完全同意）。我建议仅将 JS 应用于 iOS 设备。

Answer 4

要检查的其他事项是输入字段的字体大小是否大于将触发输入缩放的最小值。我在这里凭记忆工作，但我遇到了类似的问题。将输入字体大小设置为 16px（同样来自内存）或更大可防止 iOS Safari 尝试缩放输入字段并因此扰乱页面滚动。

iOS Chrome/Safari - 聚焦模态内的输入时不需要的滚动

iOS Chrome/Safari - Unwanted scrolling when focusing an input inside the modal

javascript

html

ios

css

vertical-scrolling