2014-10-30 7 views
0

"가기"navbar가있는 웹 사이트와 함께 몇 개의 입력란과 함께 "for"라벨이 있습니다.
레이블을 클릭하면 페이지의 나머지 부분에 부작용이없는 해당 입력에 초점이 맞춰집니다. (나는 모든 현대의 데스크탑 브라우저와 안드로이드의 네이티브 브라우저와 크롬에서 그것을 테스트했다).입력란과 라벨이있는 iOS에서 가장 위에 고정 된 navbars의 예측할 수없는 동작

iOS (iPad, iPhone)를 제외하고는 같은 라벨을 클릭하면
입력이 예상되는 초점을 맞추고 예상대로 부드러운 키보드로 입력됩니다.

이제 다른 입력의 레이블을 클릭하면 기본 스크롤이 발생하고 새로 포커스가 지정된 입력이 뷰포트의 보이는 부분에 머무르기 위해 위치를 조정합니다. 이는 또한 잘 작동하는 것으로 예상되지만, 이로 인해 상단에 고정 된 'navbar'에 별난 효과가 발생합니다. Navbar는 아무런 의미없이 뷰포트 전체에서 충돌합니다.

입력 자체를 클릭 할 때 동일한 동작이 일어나지 않는다고 추가해야합니다. 해당 레이블을 클릭 할 때만 추가해야합니다.

누구나 전에 경험 했습니까? iOS의 버그처럼 보이지만 실제로 방황하고 있습니다. 라벨을 클릭하고 해당 입력을 클릭하면 실제 동작이 어떻게 달라지며이 동작이 구현되는 이유는 무엇입니까 iOS에서만입니다.

iPod, iPhone, iPad userAgent를 감지하고 해당 에이전트의 레이블에서 "for"특성을 제거하여 일시적으로 문제를 해결할 수 있습니다 (가능한 경우 레이블의 '클릭 가능성'유지)하지만 보이지 않습니다. 나에게 옳다.

이 문제에 대한 의견이 있으십니까?

+0

iOS의 버전이 실제로 너무 달라집니다 ... iOS 5 및 Android 4 모두 위치가 고정 지원됩니다. 마크 업과 CSS를 제공 할 수 있습니까? – cport1

+0

iPad2에서 iOS 7.1.2로 테스트를 마쳤으며 iOS 8 iPhone5에서도 동일한 결과를 테스트했습니다. 테스트 피들 (fiddle)을 만들면 업데이트 하겠지만 고정 요소가있는 페이지와 많은 라벨 입력 쌍을 포함하는 폼에서 발생합니다. – robjez

+0

ok. 그래서 [link] (http://goo.gl/lUPsaO) 작은 시나리오의 시나리오를 시뮬레이트해야합니다. iOS 기기에서 열 때 무슨 뜻인지 알게 될 것입니다. 입력 레이블을 클릭하고 navbar를 관찰하십시오. – robjez

답변

0

U는 navbar의 CSS 위치 속성을 "fixed"에서 "absolute"로 바꿀 수 있으며 너비가 & 인 단위를 "%"또는 "px"에서 "vh"또는 "vw"로 전환 할 수 있습니다. 잘한다.