safari Thanh menu iOS xung đột với các nút ở dưới 10% màn hình

14

Tôi đang xây dựng một cổng thông tin web phải có chức năng và đẹp trên nhiều nền tảng. Một trong những nền tảng là IOS Safari và tôi gặp phải sự cố. Trong mã của tôi, tôi căn chỉnh hai nút nổi ở dưới cùng của div với chiều rộng và chiều cao 100% Tất cả đều hoạt động tốt và các nút của tôi hiển thị chính xác như chúng được cho là ở dưới cùng của trang. Tuy nhiên, khi tôi nhấp vào các nút, chế độ xem nhỏ gọn từ safari di động chuyển sang chế độ xem đầy đủ và các nút của tôi bị ẩn sau thanh điều hướng phía dưới!

Đây có phải là hành vi bình thường đối với safari mobile để hiển thị menu mở rộng khi người dùng chạm vào 10% dưới cùng của màn hình? Làm thế nào tôi có thể tránh điều này?

Trong gif này, bạn có thể thấy sự cố trên trình giả lập IOS: thí dụ
Như bạn có thể thấy sự cố chỉ xảy ra khi một nút nằm trong 10% chế độ xem thấp hơn. Đây chỉ là một nút bình thường, Mã của tôi đã được kiểm tra bởi ba nhà phát triển và nó không có lỗi.

— dennismuijs
nguồn

Nếu bạn liệt kê đoạn mã của mình, hãy gắn cờ này và chúng tôi có thể di chuyển để xếp chồng tràn ...

— bmike

Tôi đã tạo lỗi cho Safari, vui lòng nhận xét tại đó: bug.webkit.org/show_orms.cgi?id=194235

— sheerun

5

Đây là hành vi bình thường trong Mobile Safari, chạm vào phía dưới sẽ hiển thị các tùy chọn trình duyệt khác nhau và cuộn trang web lên tương ứng. Chức năng trang web vẫn giữ nguyên, vì vậy người dùng vẫn có thể nhấn vào nút sau khi cuộn để truy cập bất kỳ chức năng nào mà nó có.

— nohillside
nguồn

4

Cảm ơn Patrix, tôi biết điều này là bình thường, nhưng có cách nào để ghi đè hành vi này thông qua html, css hoặc js không? Tôi đã đăng câu hỏi này lên stack stack nhưng vì nó là một cái gì đó liên quan đến apple có thể hỏi khác nhau sẽ biết một cách

— dennismuijs

1

StackOverflow (hoặc thậm chí là một trang SE nơi các nhà phát triển web đi chơi) sẽ tốt hơn cho loại điều này hơn AD (tập trung vào các vấn đề của người dùng cuối). Vì việc truy cập các điều khiển trình duyệt bằng cách nào đó rất cần thiết cho người dùng, tôi nghi ngờ liệu có cách nào để tránh hành vi này hay không.

— nohillside

liên kết đến ngăn xếp tràn q & a cho việc này?

— Ben Roberts

7

Tôi nghĩ rằng tôi có thể đã tìm thấy một câu trả lời. Đặt nội dung của bạn để có các kiểu sau:

height: 100% (cho phép nội dung lấp đầy khung nhìn và vượt ra ngoài đáy)
overflow-y: scroll(cho phép bạn cuộn bên dưới khung nhìn; giá trị mặc định là visible)
-webkit-overflow-scrolling: touch (để làm mịn mọi hành vi cuộn)

xuất hiện để buộc menu iOS trong Safari luôn xuất hiện. Bằng cách đó, các lần nhấp vào nút sẽ thực sự hoạt động thay vì mở menu Safari. Hi vọng điêu nay co ich!

— jennz0r
nguồn

Chắc chắn, điều này không hoạt động, nhưng không phải tất cả các trang web có thể chấp nhận cài đặt overflow-y: scrolltrên khu vực nội dung chính của họ. Hack này có tác dụng phụ sẽ ảnh hưởng đến tất cả các yếu tố trẻ em. Nói một cách chính xác hơn, các thuộc tính css này ảnh hưởng trực tiếp đến tất cả các phần tử con và buộc menu safari hiển thị thực sự là tác dụng phụ.

— zevdg

Cảm ơn. Chưa thử chạm vào phía dưới màn hình nhưng ít nhất 10% thiết kế của tôi không bị che lấp bởi thanh menu đáng ghét của Safari. Để thêm vào điều này, bạn cần phải cung cấp cho mọi phần tử có chứa height: 100%. Đối với một công ty kiếm được nhiều tiền từ thiết bị di động, trải nghiệm web di động của họ thật kinh khủng.

— corysimmons