Lỗi vị trí cố định mới trên iOS8

Question

Tôi có một trang web có thanh tiêu đề và thanh trượt được cố định. Với iOS7 theo hướng dọc, tiêu đề cố định vẫn cố định khi thanh bên hiển thị, nhưng trên iOS8 tiêu đề đẩy nhẹ lên trên tùy thuộc vào khoảng cách bạn cuộn xuống. Tôi cần nó để cố định.

Xem jsbin này: http://jsbin.com/xuyevi/2/

Những mảnh chính là một tiêu đề, một bên, và nội dung chính. Tiêu đề được cố định ở đầu màn hình bằng cách sử dụng vị trí cố định và có chỉ mục z giữ nó ở trên nội dung khi bạn đang di chuyển.

Thanh bên được cố định ở phía bên trái của màn hình và ban đầu được ẩn bằng cách dịch sang trái theo chiều rộng của nó.

Để mở thanh bên, mỗi tiêu đề, nội dung và thanh bên được dịch sang bên phải theo chiều rộng của thanh bên.

Một lần nữa, tính năng này hoạt động hoàn hảo trên iOS7 và tất cả các trình duyệt khác hỗ trợ dịch3d và thậm chí nó hoạt động chính xác trong iOS8 khi ở hướng ngang. Nhưng trong chân dung iOS8, tiêu đề cố định sẽ trượt khỏi màn hình dựa trên mức độ cuộn xuống của người dùng.

Hơn nữa, bằng cách sử dụng trình kiểm tra Safari cho thấy rằng các mục menu trên màn hình được bù trừ từ vị trí dự kiến ​​của chúng. I E. chọn một phần tử trong thanh tra đánh dấu một vùng trên màn hình được bù đắp từ vị trí thực tế mà nó được hiển thị.

Có ai khác chạy vào điều này không? Có ai biết sửa chữa không?

EDIT: Thanh tra viên cho rằng tiêu đề vị trí cố định chính xác ở vị trí cần thiết, mặc dù nó thực sự bị đẩy ra khỏi màn hình.

Answer 1

Tôi đã cố gắng thực hiện một điều tương tự (xem here và here) sau đó thấy rằng Apple đã xuất bản một số technical note đề xuất rằng tránh định vị cố định. Tôi thề nó hoạt động tốt trong iOS 7, nhưng bây giờ với iOS8 nó không còn "gậy" nữa.

Vấn đề này dường như liên quan chặt chẽ đến việc thiết thẻ này meta:

<meta name="viewport" content="width=device-width"> 

Xem thêm: Fix div to bottom without using css position

Answer 2

Tôi đã có một vấn đề tương tự trên iOS sử dụng nhiều yếu tố vị trí cố định và một CSS hoạt hình nav off-canvas . Trên một trang dài, "trôi dạt" trở lên là một trình chặn bởi vì nó cuối cùng đã tăng lên đến mức mà nó ẩn trình kích hoạt nav, làm cho nó không thể đóng menu. Tôi đã cố gắng rộng rãi để tìm một bản sửa lỗi và giải quyết trên một cách giải quyết: di chuyển trở lại đầu trang trước khi hoạt ảnh. (#ocnTrigger là off-canvas của tôi đơn cò.)

$('#ocnTrigger').click(function(){ 
    $('body').animate({ 
     scrollTop: 0 
    }, 0); 
}); 

Answer 3

Một chút muộn để đảng, nhưng thêm

html, body { 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

sẽ sửa chữa bù di chuyển trên các yếu tố cố định được bù đắp (trái ví dụ. : 20px) trong iOS 8.