元素在手機鉻和Safari瀏覽器中不可見

在此頁面中，在通過jQuery將類應用於它之後，#searchInput元素不可見。元素在手機鉻和Safari瀏覽器中不可見

我檢查了它的可見性並不隱藏，它的不透明度不是0，它的顯示不是0。

我知道元素在那裏，因爲當我將鼠標懸停在開發工具中的代碼上時，我看到了它的填充和邊距。

enter image description here

這發生在移動Chrome和Safari，但不是在桌面Chrome和Safari。

可以使用chrome dev工具複製桌面chrome中的問題以模擬移動設備。

這裏是如何複製的問題：

到這個頁面：https://googledrive.com/host/0BwJVaMrY8QdcMlJSU1J4RmZlSXc/KE_home.html
向下滾動，這樣的標題是鑑於不再
向上滾動，但還不足以使標題回到視圖中。

該類.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。如果有人能幫我解決這個問題，我將不勝感激。

來源

2014-02-05 gomangomango

我能夠用Firefox在桌面上複製您的問題。事實上，Chrome並沒有它，但Firefox 27已經擁有它。

對於那些想要查看此問題的人，只需在Firefox中打開他的URL並向下滾動即可。只要標題出現在視圖中，那該死的搜索輸入就會顯示出一秒鐘的分裂然後消失。

來源

2014-02-05 21:06:30

元素在手機鉻和Safari瀏覽器中不可見

回答

相關問題