1. Trang chủ
  2. Câu hỏi và trả lời
  3. Cách sửa yếu tố đầu vào iOS 11 theo lỗi phương thức cố định

Cách sửa yếu tố đầu vào iOS 11 theo lỗi phương thức cố định

2017-10-04 18 views
12

Lỗi trong đầu vào HTML trong iOS 11 mới phát hành đang tạo ra sự cố cho các trang web có yếu tố đầu vào trong vùng chứa cố định. Đây là chính xác những gì đang xảy ra và một số cách giải quyết có thể.Cách sửa yếu tố đầu vào iOS 11 theo lỗi phương thức cố định

Nếu bạn có trong một thùng chứa cố định và nó đủ gần đáy màn hình buộc trình duyệt cuộn để nhường chỗ cho bàn phím, con trỏ được đặt bên ngoài đầu vào văn bản. Đây là một vấn đề quan trọng đối với chúng tôi vì một trong những chức năng cốt lõi của chúng tôi dựa vào đầu vào của người dùng thông qua hộp thoại phương thức cố định.

Đây là một vấn đề quan trọng đối với chúng tôi vì một trong các chức năng cốt lõi của chúng tôi dựa vào đầu vào của người dùng thông qua hộp thoại phương thức cố định.

enter image description here

Nguồn

2017-10-04 Amjad Jafar

Trả lời

0

Giải pháp này giúp tôi khắc phục vấn đề đầu vào IOS11: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Nó cũng sửa chữa cuộn nền khó chịu, khi bạn cố gắng di chuyển bên trong phương thức :)

Tóm tắt: Bạn thêm position: fixed cho cơ thể, sổ tiền mặt .pageYOffset và di chuyển đến vị trí tiền mặt sau khi bật lên gần để ngăn việc di chuyển đến đầu trang.

Nguồn

2017-11-03 10:10:51

0

Tôi có bugg iOS này với biểu mẫu đăng nhập bên trong phần tử tiêu đề/biểu ngữ fixed. Có một button bên trong tiêu đề để mở cửa sổ phương thức với biểu mẫu đăng nhập. Cửa sổ phương thức thực tế là absolute được định vị, nhưng phần tử tiêu đề/biểu ngữ là fixed.

Tôi đã giải quyết nó khá dễ dàng chỉ với một vài dòng mã. Vì vậy, những gì tôi đang làm là tôi đang thay đổi container fixed thành absolute, nhưng chỉ khi biểu mẫu đăng nhập được mở, nó tạo ra sự kỳ diệu với điểm đánh dấu đầu vào.

jQuery:

$('.ios #mob-login').on('click', function(){ 
    $('body').toggleClass('login-open'); 
});

CSS:

.ios body.login-open #banner-wrapper { 
    position: absolute; 
}

Vì vậy, bây giờ là tiêu đề cố định trở thành tuyệt đối. Nếu đó là iOS và chỉ khi hộp đăng nhập mở.

Điều này có thể giải quyết được sự cố của bạn nếu bạn gặp sự cố tương tự.

Ps. Bạn cần một tập lệnh để phát hiện và viết tên lớp ios/ios11 đến <html> hoặc tương tự, nhưng tôi sẽ không tham gia vào bài đăng này. Bạn có thể tìm thấy nhiều giải pháp cho điều đó.

Nguồn

2017-11-17 12:00:32 JoakimB

4

Hiện tại có không sửa chữa hoàn hảo cho nó.Hai lựa chọn tạm thời:

  1. Change thoại/modal để position: absolute (Không khuyến khích)
  2. Cố gắng loại bỏ nền di chuyển khi modal/hộp thoại sẽ mở ra và khôi phục lại nó khi đóng hộp thoại.

chi tiết cho phương án 2: Ví dụ, bạn có thể đặt div gốc của bạn (hoặc bất kỳ mà có một thanh cuộn) như overflowY='hidden' khi hộp thoại mở ra, và thay đổi nó trở lại overflowY='' đóng cửa khi hộp thoại. (Nhược điểm: Trình duyệt sẽ được cuộn lên đầu khi bạn mở hộp thoại/modal)

Lưu ý:

  1. Đừng nhớ để phát hiện OS/trình duyệt khi sửa kích hoạt, nếu không bạn có thể sẽ gặp phải vấn đề trong IE.
  2. Theo dõi this thread để nhận cập nhật mới nhất về vấn đề này.

Nguồn

2017-11-18 09:32:40 Ming

+0

Cảm ơn bạn đã thể hiện sự quan tâm nhưng 'tràn' không hoạt động trên trình duyệt Safari và tôi đang làm việc trên các trang động nên không có giới hạn độ dài trang và 'vị trí: tuyệt đối' không bao giờ hoạt động trên chúng. –

+0

Cùng một vấn đề trước đây. Cũng cố định bằng cách đặt 'vị trí: tuyệt đối' – iplus26

0

Hãy thử điều này nó có thể giúp bạn

//HTML 
<head> 
    <style> 
      .ios-11-body-fixed { 
      position: fixed; 
      width: 100%; 
      } 
    </style> 
</head> 

//jQuery 
$("#leadgen-modal").on('show.bs.modal', function() { 
    $('body').addClass('ios-11-body-fixed'); 
}); 
$('#leadgen-modal').on('hidden.bs.modal', function() { 
      $('body').removeClass('ios-11-body-fixed'); 
});

Nguồn

2017-12-19 09:41:11

+0

Cảm ơn bạn đã trợ giúp! nhưng trong kịch bản của tôi nó không hoạt động 100% vì tôi có các trang động rất dài và khi bạn thêm 'vị trí: cố định' vào phần thân nó cuộn lên đầu mỗi lần, bất kỳ cách nào tôi quản lý với chiều cao động thêm vào đầu cuộn ' jquery 'chức năng, nhưng nó cũng thất bại trong một số kịch bản. –

1

Giải pháp này giúp tôi để sửa chữa trong bất kỳ mô hình IOS.

Mục đầu tiên chỉ nhắm mục tiêu các thiết bị iOS có mã này.

//target ios 
var isMobile = { 
    iOS: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    } 
} 
if(isMobile.iOS()) { 
     jQuery('body').addClass('apple-ios'); 
}

sau đó đặt mã này trong css của bạn:

body.apple-ios.modal-open { 
    position: fixed; 
    width:100%; 
}

Nếu bạn đang sử dụng wordpress và plugin bộ nhớ cache, bạn cần để trống tất cả bộ nhớ cache.

Hy vọng điều này sẽ giúp bạn.

Nguồn

2018-03-07 07:21:27

Các vấn đề liên quan

 Các vấn đề liên quan