ios8 中的 Safari 在固定元素获得焦点时滚动屏幕

Question

在 IOS8 Safari 中有一个位置固定的新错误。

如果您将焦点放在固定面板中的文本区域，Safari 会将您滚动到页面底部。

这使得所有类型的 UI 都无法使用，因为您无法在不将页面一直向下滚动并丢失位置的情况下将文本输入文本区域。

有没有办法彻底解决这个错误？

#a {
  height: 10000px;
  background: linear-gradient(red, blue);
}
#b {
  position: fixed;
  bottom: 20px;
  left: 10%;
  width: 100%;
  height: 300px;
}

textarea {
   width: 80%;
   height: 300px;
}

<html>
   <body>
   <div id="a"></div>
   <div id="b"><textarea></textarea></div>
   </body>
</html>

Answer 1

还没有处理这个特殊的错误，但可能会放一个 overflow: hidden;当文本区域可见时（或仅处于活动状态，具体取决于您的设计）在主体上。这可能会导致浏览器无法滚动到任何地方 "down"。

Answer 2

我昨天刚刚通过将#a 的高度设置为最大可见高度（body 高度在我的情况下）跳过了类似的东西，而#b 是可见的

例如：

    <script>
    document.querySelector('#b').addEventListener('focus', function () {
      document.querySelector('#a').style.height = document.body.clientHeight;
    })
    </script>

ps：抱歉迟到的例子，刚刚注意到它是需要的。

Answer 3

干净吗？没有。

我最近遇到了这个问题，我自己在粘帖中有一个固定的搜索字段 header，目前你能做的最好的事情就是始终将滚动位置保持在一个变量中，并在选择时进行固定元素的位置是绝对的，而不是固定在基于文档滚动位置的顶部位置。

然而，这非常难看，并且在着陆到正确位置之前仍然会导致一些奇怪的来回滚动，但这是我能得到的最接近的。

任何其他解决方案都涉及覆盖浏览器的默认滚动机制。

Answer 4

我能想到的最佳解决方案是切换到使用 position: absolute; 对焦并计算它在使用 position: fixed; 时的位置。诀窍是 focus 事件触发得太晚，所以必须使用 touchstart。

这个答案中的解决方案非常接近地模仿了我们在 iOS 7 中的正确行为。

要求：

body元素必须有定位，以保证当元素切换到绝对定位时正确定位。

body {
    position: relative;
}

The Code (Live Example):

以下代码是所提供测试用例的基本示例，可以针对您的特定用例进行调整。

//Get the fixed element, and the input element it contains.
var fixed_el = document.getElementById('b');
var input_el = document.querySelector('textarea');
//Listen for touchstart, focus will fire too late.
input_el.addEventListener('touchstart', function() {
    //If using a non-px value, you will have to get clever, or just use 0 and live with the temporary jump.
    var bottom = parseFloat(window.getComputedStyle(fixed_el).bottom);
    //Switch to position absolute.
    fixed_el.style.position = 'absolute';
    fixed_el.style.bottom = (document.height - (window.scrollY + window.innerHeight) + bottom) + 'px';
    //Switch back when focus is lost.
    function blured() {
        fixed_el.style.position = '';
        fixed_el.style.bottom = '';
        input_el.removeEventListener('blur', blured);
    }
    input_el.addEventListener('blur', blured);
});

Here is the same code without the hack for comparison.

警告：

如果 position: fixed; 元素除了 body 之外还有任何其他带定位的父元素，切换到 position: absolute; 可能会出现意外行为。由于 position: fixed; 的性质，这可能不是主要问题，因为嵌套此类元素并不常见。

建议：

虽然使用 touchstart 事件会过滤掉大多数桌面环境，但您可能希望使用用户代理嗅探，这样这段代码只会运行损坏的 iOS 8，而不是其他设备，例如 Android 和更早的 iOS 版本。不幸的是，我们还不知道 Apple 什么时候会在 iOS 中修复这个问题，但如果它没有在下一个主要版本中修复，我会感到惊讶。

Answer 5

一个可能的解决方案是替换输入字段。

监控 div
聚焦隐藏的输入字段以呈现键盘
将隐藏输入字段的内容复制到假输入字段中

function focus() {
  $('#hiddeninput').focus();
}

$(document.body).load(focus);

$('.fakeinput').bind("click",function() {
    focus();
});

$("#hiddeninput").bind("keyup blur", function (){
  $('.fakeinput .placeholder').html(this.value);
});

#hiddeninput {
  position:fixed;
  top:0;left:-100vw;
  opacity:0;
  height:0px;
  width:0;
}
#hiddeninput:focus{
  outline:none;
}
.fakeinput {
  width:80vw;
  margin:15px auto;
  height:38px;
  border:1px solid #000;
  color:#000;
  font-size:18px;
  padding:12px 15px 10px;
  display:block;
  overflow:hidden;
}
.placeholder {
  opacity:0.6;
  vertical-align:middle;
}

<input type="text" id="hiddeninput"></input>

<div class="fakeinput">
    <span class="placeholder">First Name</span>
</div>

codepen

Answer 6

我找到了一种有效的方法无需更改为绝对位置！

完整未注释的代码

var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});
var savedScrollPos = scrollPos;

function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }
  return false;
}

$('input[type=text]').on('touchstart', function(){
    if (is_iOS()){
        savedScrollPos = scrollPos;
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });
        $('html').css('overflow','hidden');
    }
})
.blur(function(){
    if (is_iOS()){
        $('body, html').removeAttr('style');
        $(document).scrollTop(savedScrollPos);
    }
});

分解

首先，您需要在 HTML 中将固定输入字段置于页面顶部（这是一个固定元素，因此无论怎样将它放在顶部附近在语义上都有意义）：

<!DOCTYPE HTML>

<html>

    <head>
      <title>Untitled</title>
    </head>

    <body>
        <form class="fixed-element">
            <input class="thing-causing-the-issue" type="text" />
        </form>

        <div class="everything-else">(content)</div>

    </body>

</html>

然后需要将当前滚动位置保存到全局变量中：

//Always know the current scroll position
var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});

//need to be able to save current scroll pos while keeping actual scroll pos up to date
var savedScrollPos = scrollPos;

然后你需要一种方法来检测 iOS 设备，这样它就不会影响不需要修复的东西（函数取自）

//function for testing if it is an iOS device
function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }

  return false;
}

既然我们已经拥有了所需的一切，那就是解决方法:)

//when user touches the input
$('input[type=text]').on('touchstart', function(){

    //only fire code if it's an iOS device
    if (is_iOS()){

        //set savedScrollPos to the current scroll position
        savedScrollPos = scrollPos;

        //shift the body up a number of pixels equal to the current scroll position
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });

        //Hide all content outside of the top of the visible area
        //this essentially chops off the body at the position you are scrolled to so the browser can't scroll up any higher
        $('html').css('overflow','hidden');
    }
})

//when the user is done and removes focus from the input field
.blur(function(){

    //checks if it is an iOS device
    if (is_iOS()){

        //Removes the custom styling from the body and html attribute
        $('body, html').removeAttr('style');

        //instantly scrolls the page back down to where you were when you clicked on input field
        $(document).scrollTop(savedScrollPos);
    }
});

Answer 7

基于这个 good analysis 这个问题，我在 html 和 body 元素中使用了这个 css:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

我认为它对我来说效果很好。

Answer 8

就像 Mark Ryan Sallee 所建议的那样，我发现动态更改 背景元素 的高度和溢出是关键 - 这使 Safari 无法滚动。

因此，在模态框的打开动画结束后，更改背景的样式：

$('body > #your-background-element').css({
  'overflow': 'hidden',
  'height': 0
});

当您关闭模式时将其改回：

$('body > #your-background-element').css({
  'overflow': 'auto',
  'height': 'auto'
});

虽然其他答案在更简单的上下文中很有用，但我的 DOM 太复杂（感谢 SharePoint）无法使用 absolute/fixed 位置交换。

Answer 9

None 这些解决方案对我有用，因为我的 DOM 很复杂，而且我有动态无限滚动页面，所以我必须创建自己的。

背景： 我正在使用一个固定的 header 和一个进一步向下的元素，一旦用户向下滚动到那么远，它就会粘在它下面。该元素有一个搜索输入字段。此外，我在向前和向后滚动时添加了动态页面。

问题： 在iOS中，只要用户点击固定元素中的输入，浏览器就会一直滚动到页面顶部。这不仅导致了不良行为，还触发了我在页面顶部添加的动态页面。

预期解决方案：当用户单击粘性元素中的输入时，iOS 中没有滚动（根本没有none）。

解法：

     /*Returns a function, that, as long as it continues to be invoked, will not
    be triggered. The function will be called after it stops being called for
    N milliseconds. If `immediate` is passed, trigger the function on the
    leading edge, instead of the trailing.*/
    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

     function is_iOS() {
        var iDevices = [
          'iPad Simulator',
          'iPhone Simulator',
          'iPod Simulator',
          'iPad',
          'iPhone',
          'iPod'
        ];
        while (iDevices.length) {
            if (navigator.platform === iDevices.pop()) { return true; }
        }
        return false;
    }

    $(document).on("scrollstop", debounce(function () {
        //console.log("Stopped scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'absolute');
                $('#searchBarDiv').css('top', yScrollPos + 50 + 'px'); //50 for fixed header
            }
            else {
                $('#searchBarDiv').css('position', 'inherit');
            }
        }
    },250,true));

    $(document).on("scrollstart", debounce(function () {
        //console.log("Started scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'fixed');
                $('#searchBarDiv').css('width', '100%');
                $('#searchBarDiv').css('top', '50px'); //50 for fixed header
            }
        }
    },250,true));

要求： JQuery startsroll 和 stopscroll 功能需要移动设备才能工作。

包含去抖以消除粘性元素造成的任何滞后。

在 iOS10.

中测试

Answer 10

我能够通过向必要的 select 元素添加一个事件侦听器来解决 select 输入的这个问题，然后在有问题的 select 时滚动一个像素的偏移量获得焦点。

这不一定是一个好的解决方案，但它比我在这里看到的其他答案更简单、更可靠。浏览器似乎re-render/re-calculate position: fixed;基于 window.scrollBy() 函数中提供的偏移量的属性。

document.querySelector(".someSelect select").on("focus", function() {window.scrollBy(0, 1)});

Answer 11

此问题现已在 iOS 10.3 中修复！

应该不再需要黑客了。

Answer 12

我遇到了问题，下面的代码行为我解决了问题 -

html{

 overflow: scroll; 
-webkit-overflow-scrolling: touch;

}

ios8 中的 Safari 在固定元素获得焦点时滚动屏幕

Safari in ios8 is scrolling screen when fixed elements get focus

javascript

css

safari

ios

ios8

要求：

The Code (Live Example):

警告：

建议：