光标外的 iOS 11 Safari 引导模式文本区域

那些使用 position: fixed 和基于 scrollTop 的位置校正的解决方案非常有效，但有些人（包括我）遇到了另一个问题：键盘插入符号/光标在输入聚焦时不显示。

我观察到插入符号/光标仅在我们不要在正文上使用 position: fixed 时才有效。所以在尝试了几件事之后，我放弃了使用这种方法，并决定在 body 上使用 position: relative 并使用 scrollTop 来纠正 modal 的顶部位置。

请参见下面的代码：

var iosScrollPosition = 0;

function isIOS() {
   // use any implementation to return true if device is iOS
}

function initModalFixIOS() {
    if (isIOS()) {
        // Bootstrap's fade animation does not work with this approach
        // iOS users won't benefit from animation but everything else should work
        jQuery('#myModal').removeClass('fade');
    }
}

function onShowModalFixIOS() {
    if (isIOS()) {
        iosScrollPosition = jQuery(window).scrollTop();
        jQuery('body').css({
            'position': 'relative', // body is now relative
            'top': 0
        });
        jQuery('#myModal').css({
            'position': 'absolute', // modal is now absolute
            'height': '100%',
            'top': iosScrollPosition // modal position correction
        });
        jQuery('html, body').css('overflow', 'hidden'); // prevent page scroll
    }
}

function onHideModalFixIOS() {
    // Restore everything
    if (isIOS()) {
        jQuery('body').css({
            'position': '',
            'top': ''
        });
        jQuery('html, body').scrollTop(iosScrollPosition);
        jQuery('html, body').css('overflow', '');
    }
}

jQuery(document).ready(function() {
    initModalFixIOS();
    jQuery('#myModal')
        .on('show.bs.modal', onShowModalFixIOS)
        .on('hide.bs.modal', onHideModalFixIOS);
});

如前所述：将 body 的 style.position property 设置为 fixed 解决了 iOS cursor misplacement 问题。

然而，这种收益是以被强制滚动到页面顶部为代价的。

幸运的是，可以通过利用 HTMLElement.style 和 window.scrollTo() 来消除这个新的 UX 问题而无需太多开销。

基本要点是通过在 mounting 时操作 body 元素的 style.top 来抵消 scroll to top。这是使用 ygap 变量捕获的 YOffset 值完成的。

从那里只需将 body's style.top 重置为 0 并在 dismounting 时使用 window.scrollTo(0, ygap) 重新构建用户视图。

请参阅下面的实际示例。

// Global Variables (Manage Globally In Scope).
const body = document.querySelector('body') // Body.
let ygap = 0 // Y Offset.


// On Mount (Call When Mounting).
const onModalMount = () => {

  // Y Gap.
  ygap = window.pageYOffset || document.documentElement.scrollTop

  // Fix Body.
  body.style.position = 'fixed'

  // Apply Y Offset To Body Top.
  body.style.top = `${-ygap}px`

}


// On Dismount (Call When Dismounting).
const onModalDismount = () => {

  // Unfix Body.
  body.style.position = 'relative'

  // Reset Top Offset.
  body.style.top = '0'

  // Reset Scroll.
  window.scrollTo(0, ygap)

}

如果有人正在寻找适用于 IOS >11.2 并且不需要任何额外 CSS 的 vanilla js 修复程序：

(function() {
    if (!/(iPhone|iPad|iPod).*(OS 11_[0-2]_[0-5])/.test(navigator.userAgent)) return

    document.addEventListener('focusin', function(e) {
        if (!e.target.tagName == 'INPUT' && !e.target.tagName != 'TEXTAREA') return
        var container = getFixedContainer(e.target)
        if (!container) return
        var org_styles = {};
        ['position', 'top', 'height'].forEach(function(key) {
            org_styles[key] = container.style[key]
        })
        toAbsolute(container)
        e.target.addEventListener('blur', function(v) {
            restoreStyles(container, org_styles)
            v.target.removeEventListener(v.type, arguments.callee)
        })
    })

    function toAbsolute(modal) {
        var rect = modal.getBoundingClientRect()
        modal.style.position = 'absolute'
        modal.style.top = (document.body.scrollTop + rect.y) + 'px'
        modal.style.height = (rect.height) + 'px'
    }

    function restoreStyles(modal, styles) {
        for (var key in styles) {
            modal.style[key] = styles[key]
        }
    }

    function getFixedContainer(elem) {
        for (; elem && elem !== document; elem = elem.parentNode) {
            if (window.getComputedStyle(elem).getPropertyValue('position') === 'fixed') return elem
        }
        return null
    }
})()

这是做什么的：

检查浏览器是否是 iOS 11.0.0 - 11.2.5 上的 Safari 监听页面上的任何 focusin 事件如果焦点元素是输入或文本区域并且包含在具有固定位置的元素中，则将容器位置更改为绝对位置关于 scrollTop 和容器的原始尺寸。在模糊时，将容器的位置恢复为固定。

这个解决方案对我有用，并且它在 iOS 上的所有浏览器上运行良好。

.safari-nav-force{
/* Allows content to fill the viewport and go beyond the bottom */
height: 100%;
overflow-y: scroll;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
}

JavsScript

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
$('.modal').on('shown.bs.modal', function () {
    if (iOS && $('.modal').hasClass('in')){
        $('html,body').addClass('safari-nav-force');
    }
});
$('.modal').on('hidden.bs.modal', function () {
    if (iOS && !$('.modal').hasClass('in')){
        $('html,body').removeClass('safari-nav-force');
    }
});

您是否尝试过 viewport-fit=cover 元视口。

看看这个：https://ayogo.com/blog/ios11-viewport/

覆盖模态 css 并将其 position 从 fixed 更改为 absolute

.modal {
position: absolute !important;
}

添加到#modal 位置：绝对它修复与位置相关的未来问题：已修复