在移动铬和safari中看不见的元素

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

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

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

这种情况发生在移动Chrome和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(st235) $('#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中点击他的URL并向下滚动即可。 一旦标题进入视图，该死的搜索输入显示一秒钟的分裂然后消失。