在移动铬和野生动物园中看不见的元素

Question

在这个页面中，＃searchInput元素在通过jQuery应用它之后是不可见的。

我检查了它的可见性没有被隐藏，它的不透明度不是0，它的显示不是没有。

我知道元素存在，因为当我将鼠标悬停在开发工具中的代码上时，我会看到它的填充和边距。

这种情况发生在移动设备和Safari中，但不适用于桌面Chrome和Safari。

可以使用chrome dev工具复制桌面Chrome中的问题，以模拟移动设备。

以下是如何复制问题：

1. 转到此页：https://googledrive.com/host/0BwJVaMrY8QdcMlJSU1J4RmZlSXc/KE_home.html
2. 向下滚动，以便不再显示标题
3. 向上滚动，但不够，以便标题重新进入视图。

应该应用课程.stickySearch，它将在桌面和移动设备中修复并显示在页面顶部;但是，在移动设备中，它是不可见的。

以下是添加类的JS代码：

var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st<=lastScrollTop){
        //scroll up
        if($(this).scrollTop()>235) $('#searchInput').removeClass('slideBack').addClass('stickySearch');
        else $('#searchInput').removeClass('stickySearch').addClass('slideBack');
     }
else $('#searchInput').removeClass('stickySearch').removeClass('slideBack');
lastScrollTop = st;

.slideBack没有关联的样式，买.stickySearch会：

.stickySearch{
    width:60% !important;
    position:fixed !important;
    left:0;
    right:0;
    top:32px !important;
}
@media only screen and (max-width:678px){
    .stickySearch{
        width:65% !important;
    }
}

这发生在我的iPad，Nexus 7和Galaxy Nexus上。如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

我能够使用Firefox在桌面上复制您的问题。事实上，Chrome没有它，但Firefox 27拥有它。

对于那些想要查看此问题的人，只需在Firefox中点击他的网址并向下滚动即可。一旦标题进入视图，该死的搜索输入显示一秒钟的分裂然后消失。