如何在输入焦点上停止移动浏览器将固定位置设置为绝对位置? [英] How to stop mobile safari from setting fixed positions to absolute on input focus?

问题描述

免责声明-我了解野生动物园中的固定元素存在问题，不支持固定元素，但现在支持等等.但是我找不到解决这个确切问题的问题.

Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.

给出最简单的固定侧边栏，例如:

Given the simplest of fixed sidebars, something like:

.sidebar {
    position: fixed;
    top: 10px;
    right: 10px;
}

相对较长的页面，带有输入元素.

And a relatively long page, with input elements.

当输入元素聚焦时，任何固定元素都变为绝对-我理解为什么Safari试图使视口变得杂乱-很好，但并不总是合适的.我要求我为用户选择最佳体验(我自然知道得最多).

When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).

是问题.

即使将输入元素放在焦点上，也有什么方法可以使固定元素保持不变?

Is there any way to leave fixed elements as fixed even when input elements are focused?

我曾尝试在滚动时手动执行一些$(window).on('scroll',魔术和位置元素，但在ipad上却有些抖动.

I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.

推荐答案

Safari支持的位置:固定从9.2版开始，但是如果遇到难题，则可以通过使文档元素和正文全屏显示，然后使用绝对定位来完全创建固定位置效果.然后滚动发生在某个主要容器元素而不是主体中.使用此方法，您的固定"元素可以存在于标记中的任何位置.

Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.

jsfiddle此处

html,
body,
.mainContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.mainContainer {
  overflow: auto;
}

.fixed {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

这篇关于如何在输入焦点上停止移动浏览器将固定位置设置为绝对位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！