iOS 7 Chrome - Ngăn kéo vị trí cố định không ở dưới cùng khi bàn phím ảo bật lên

Question

Tôi có ngăn kéo dưới cùng được đặt cố định ở phía dưới. Khi khai thác, ngăn kéo sẽ trượt lên và hiển thị nhiều nội dung hơn. Trên iOS 7, khi người dùng chạm vào thẻ đầu vào hoặc thẻ văn bản, bàn phím ảo bật lên. Tuy nhiên, ngăn kéo nhảy lên trên trang thay vì dính vào phía dưới khi bàn phím bật lên. Vui lòng xem sơ đồ dưới đây để minh họa.

tôi trước hết là gặp phải vấn đề này cũng trên Safari, nhưng tôi đã thêm đoạn mã sau để thay đổi vị trí cố định để tuyệt đối khi bàn phím được mở:

// Apple.Device detects if it is an apple device 
if (Modernizr.touch && Apple.Device) { 
    /* cache dom references */ 
    var $body = jQuery('body'); 

    /* bind events */ 
    $(document) 
    .on('focus', 'input, textarea', function(e) { 
     $body.addClass('fixfixed'); 
    }) 
    .on('blur', 'input, textarea', function(e) { 
     $body.removeClass('fixfixed'); 
    }); 
} 

mã CSS:

.fixfixed #drawer { 
    bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

Bản sửa lỗi này hoạt động trên Safari trên iOS 7 nhưng nó không hoạt động trên Chrome. Ngoài ra, có một hành vi bị lỗi:

Nếu có thẻ đầu vào trên trang và tôi nhấn vào nó trên iPad, khi đó bàn phím ảo sẽ mở ra và ngăn kéo sẽ nhảy lên. Nếu ngăn kéo xảy ra sau đó bao gồm tôi đã nhấp vào, sự kiện nhấp chuột thực sự kích hoạt trên ngăn kéo. Tại sao vậy?

Tôi làm cách nào để giải quyết vấn đề này? (Tôi đã tìm kiếm một lúc nhưng làm cách nào để gỡ lỗi Chrome trên iOS?)

Rất cám ơn sự giúp đỡ của bạn!

Cập nhật

Tôi đã sử dụng đoạn mã sau để phát hiện nếu nó là Chrome trên iOS 7, nếu như vậy, tôi giấu Drawer khi bàn phím ảo đang gia tăng, và hiển thị lại ngăn kéo khi ảo bàn phím bị hỏng.

function iOSversion() { 
    if (/iP(hone|od|ad)/.test(navigator.platform)) { 
     // supports iOS 2.0 and later: <http://bit.ly/TJjs1V> 
     var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); 
     return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; 
    } 
} 

var iosVersion = iOSversion(); 

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') { 
    $(document).hammer().on('tap', 'input, textarea', function(e) { 
      $('body').addClass('chromefixfixed'); 
     }) 
      .on('blur', 'input, textarea', function(){ 
       body.removeClass('chromefixfixed'); 
      }) 
} 

mã CSS:

.chromefixfixed #drawer { 
    display: none; 
} 

Vẫn còn những câu hỏi vẫn là: làm thế nào để tôi nhận được Chrome trên iOS 7 để làm việc như Chrome trên Android (mà không giấu trong ngăn kéo khi bàn phím lên)?

Cảm ơn sự giúp đỡ!

Answer 1

Vị trí đáy cố định và vị trí tuyệt đối là một cơn ác mộng tuyệt đối trên các thiết bị iOS và Android, theo kinh nghiệm của tôi thì không thể làm cho nó hiển thị nhất quán ngay cả trên các thiết bị hiện đại nhất, không kể đến những thiết bị cũ chiếm lĩnh thị trường hiện tại. Vì vậy, nhiều như vậy, đó là một dev tôi sẽ yêu cầu một nhà thiết kế để suy nghĩ lại cách bố trí vì nó. Tôi tin rằng nó được gọi là "sidestepping turd".