对于 IOS 上的 Safari 和 Chrome，文本框到页面顶部的转换无法正常工作

Posted 2023-03-14

【中文标题】对于 IOS 上的 Safari 和 Chrome，文本框到页面顶部的转换无法正常工作

【英文标题】：Transition for text box to top of page not working properly for Safari and Chrome on IOS

【发布时间】：2016-09-28 05:44:55

【问题描述】：

页面底部有文本框。每当它被聚焦时，它应该被转换到页面的顶部。这是因为我想在输入时向用户显示建议。此实现适用于 PC 和 android 设备。而对于 ios 设备，当显示可视键盘时，文本框会离开视口，但当我按“完成”时会再次出现。

以下是我正在使用的 CSS：

#searchSection 
position: relative;
/*-webkit-overflow-scrolling: auto;*/
transition: all 0.5s;
-webkit-transition: all 0.5s; /*safari*/
-webkit-transition-delay: 0;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;

#searchSection .focused 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: #e8e8e8;
width: 100%;
z-index: 1000;
/*-webkit-backface-visibility: hidden;*/

下面是修改类名的JS：

goog.events.listen(
        searchInput,
        goog.events.EventType.FOCUS, function () 
            goog.dom.classlist.add(searchSection, 'focused');
        
    );

是否有任何解决方案/解决方法？

【参考方案1】：

根据我的经验，iOS 上的 Safari（Chrome 在那里使用相同的引擎）在具有 position: fixed 的容器中的输入存在问题。

我改用position: absolute 并在获得焦点之前滚动到输入元素来帮助自己。

【讨论】：

但是position: absolute 会在滚动时将 div 带出视口。

我用position: absolute; top: 0;将输入放在页面的最顶部，然后将页面滚动到顶部。我找不到另一种适用于 Safari 的方法。

这是解决方法，不是解决问题的方法，但绝对有帮助。我怎样才能只为IOS设备而不是其他设备？