문제의 사이트에 묻혀. 내 메인 navbar에는 클릭 할 수있는 버튼이 여러 개 있습니다. 바탕 화면 용 Chrome에서는 창의 크기를 조정하는 방법 (바탕 화면, iPad 및 모바일 디스플레이 모드에 반응)에 상관없이 제대로 작동하며, Firefox 및 Internet Explorer for desktop에서도 마찬가지입니다. 모바일 버전도 iPhone 5의 Safari, Chrome 및 Firefox에서 완벽하게 작동합니다.드롭의 콘텐츠는 아이 패드 사파리
그러나 테스트 한 모든 브라우저 (Firefox, Chrome 또는 Safari)에서 실제 iPad를 클릭하면 드롭 다운 콘텐츠가 표시되지 않습니다. 데스크톱 용 Safari에도 나타나지 않습니다. 바탕 화면 용 Chrome 브라우저에 드롭 다운 콘텐츠가 표시되지만 Chrome 용 디버거에는 드롭 다운 콘텐츠도 표시되지 않지만 드롭 다운 콘텐츠가 표시되어야하는 상자가 표시됩니다.
크롬 디버거에서 .dropdown-content.show 클래스가 활성화되어 클릭시 display: none에서 display: block으로 변경되지만 다른 페이지 콘텐츠 뒤에 묻어 있음을 알 수 있습니다. 다른 모든 페이지 콘텐츠를 삭제하면 드롭 다운 콘텐츠가 정말로 전환되고 제대로 표시되는지 확인할 수 있습니다.
그래서이 문제는 Safari 및 iPad 용 iOS의 일부 브라우저가 z- 색인을 이해하는 방법과 관련이 있다는 점을 추론하고 있습니까? 탐색 바는 z-index: 9999이며, .dropdown-content은 상속해야하지만 가장 큰 숫자가 항상 위에 표시되는 것보다 Z- 색인에 더 많은 것이 있음을 알고 있습니다.
하지만 정확히 무엇이 잘못되었으며 어떻게 수정합니까? 수동으로 opacity: 1 및 z-index: 9999을 .dropdown-content에 지정하려고 시도했습니다. -webkit-transform: translate3d(0,0,0) 해킹을 here 및 here으로 수정하여 iPad를 강제 적용하고 하드웨어 가속을 적용하려고 시도했지만 올바르게 해킹을 구현하지 않았습니까? navbar CSS에서 디스플레이 설정을 잘못 설정 했습니까? 나는 또한 똑같은 javascript와 디스플레이 설정이 iPhone의 모든 브라우저에서 잘 작동하지만 iPad에서는 브라우저가 작동하지 않는다는 점에서 혼란 스럽다.
모든 의견에 감사드립니다. 나는 방금 약 한 달 전에 웹 디자인을 가르치기 시작 했으므로 간단한 실수라고 생각하지만 잃어버린다.
* facepalm * wow로 표시됩니다. 정말 고맙습니다. 나는 그것을 어떻게 놓쳤는가? P – Nathanael