文本框到页面顶部的过渡在IOS的Safari和Chrome上不能正常工作

Transition for text box to top of page not working properly for Safari and Chrome on IOS

本文关键字：不能 Chrome 常工作 工作 IOS 顶部 文本 Safari      更新时间：2023-09-26

页面底部有一个文本框。当它被聚焦时，它应该被转移到页面的顶部。这是因为我想在用户输入时显示建议。此实现适用于PC和android设备。而对于IOS设备，当可视键盘显示时，文本框会从视图中消失，但当我按下"done"时又会出现。

下面是我使用的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');
        }
    );

有什么解决方法吗?

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

我帮助自己使用position: absolute代替和滚动到输入元素之前给它焦点。

相关文章：