모바일 크롬 및 사파리에서 보이지 않는 요소

이 페이지에서 #searchInput 요소는 클래스가 jQuery를 통해 클래스에 적용된 후에 보이지 않습니다.모바일 크롬 및 사파리에서 보이지 않는 요소

확인했는데 표시 여부가 숨겨져 있지 않고 불투명도가 0이 아니며 표시가 없음이 아닙니다.

나는 dev 도구의 코드 위에 마우스를 가져 가면 그 패딩과 여백을 볼 수 있기 때문에 요소가 있다는 것을 알고있다.

enter image description here

이 모바일 크롬 및 사파리에서 일어나는 있지만 데스크탑 크롬과 사파리입니다.

Chrome dev 도구를 사용하여 모바일 장치를 에뮬레이트하는 데스크톱 크롬 문제를 재현 할 수 있습니다. 이 페이지에

이동 : 여기

문제를 복제하지 않으려면 어떻게 헤더가 더 이상보기에서
위로 스크롤되도록하지만 충분하지 않도록 아래로 https://googledrive.com/host/0BwJVaMrY8QdcMlJSU1J4RmZlSXc/KE_home.html
스크롤 헤더가 다시 표시됩니다.

클래스 .stickySearch을 적용해야하며 고정되어 있으며 데스크톱 및 모바일 페이지의 상단이 고정됩니다. 하지만 모바일에서는 보이지 않습니다. ,

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이 수행합니다 : 내 아이 패드, 넥서스 7에서 발생

.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; 
    } 
}

하고, 여기에

클래스를 추가 할 것을 JS 코드 Galaxy Nexus. 누군가가이 문제를 해결하도록 도울 수 있다면 크게 감사 할 것입니다.

출처

2014-02-05 gomangomango

Firefox로 데스크톱에서 문제를 재현 할 수있었습니다. 실제로 Chrome에는 없지만 Firefox 27에 있습니다.

이 문제를보고 싶은 사람들은 Firefox에서 자신의 URL을 누르고 아래로 스크롤하십시오. 머리글이 보이 자마자 초조 한 검색 입력이 사라지고 두 번째 아이콘이 사라집니다.

출처

2014-02-05 21:06:30

모바일 크롬 및 사파리에서 보이지 않는 요소

답변

관련 문제