iOS上具有输入字段和标签的顶部固定导航栏的不可预测行为

Posted 2021-05-06

我有一个固定顶部'navbar'的网站，以及几个输入字段和标签“for”。 单击标签，可以将焦点集中在相应的输入上，而不会对页面的其余部分产生任何副作用。 （我已经在所有现代桌面浏览器和android的本机浏览器以及chrome上测试过它）。

一切都很好，除了ios（iPad，iPhone），点击相同的标签使得： 输入到焦点（预期）和在软键盘中滑动（这是预期的）。

现在，当我点击另一个输入的标签时，会发生默认滚动，新聚焦的输入正在调整其位置以保持在视口的可见部分内 - 这也是很好的和高度期望的行为，但同时，这会导致奇怪的效果固定在顶部的'navbar'。导航栏在整个视口中发生冲突，没有任何意义。

我需要补充一点，当我点击输入本身时也没有发生同样的行为 - 只有当我点击相应的标签时。

有谁之前经历过这个吗？看起来像iOS上的一个错误，但我真的很徘徊 - 点击标签，点击相应的输入以及为什么这种行为的实现仅在iOS上有所不同。

我有一个临时的解决方法，通过检测iPod，iPhone，iPad userAgent和从这些代理商的标签中删除“for”属性（我希望尽可能保留标签的“可点击性”），但它似乎不适合我。

有什么想法吗？

答案

U可以将导航栏的css位置属性从“fixed”替换为“absolute”，并将宽度和高度的单位从“％”或“px”切换为“vh”或“vw”，然后在ios上顺利进行。