[Bug] 修復 iOS 11 input element in fixed modals

IOS Bug

With iOS 11 safari, input textbox cursor are outside of input textbox.
在IOS手機目前都會有input游標位移的問題
尤其是input欄位在modals或是由popup開啟,fixed 在window上

總歸一句,就是fixed modals時發生了嚴重的cusor跑版
我們還在等IOS修復此項目

修正方式

大部分都是當你開啟modals時
body 給予 position:fixed

當裝置為 IOS 或者是 IOS 11 版本

1
2
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret { position: fixed; width: 100%; }
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
});

但是這樣的話,開啟 popup 或是 modale時,會 scroll to Top

後續解法

當裝置為 IOS 或者是 IOS 11 版本
開啟 popup 後鎖定 scroll
關閉時滑回至原本位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
(function iOS_CaretBug() {

var ua = navigator.userAgent,
scrollTopPosition,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

// ios 11 bug caret position
if ( iOS && iOS11 ) {
$(document.body).on('開啟popup事件', function(e) {
// Get scroll position before moving top
scrollTopPosition = $(document).scrollTop();

// Add CSS to body "position: fixed"
$("body").addClass("iosBugFixCaret");
});

$(document.body).on('關閉popup事件', function(e) {
// Remove CSS to body "position: fixed"
$("body").removeClass("iosBugFixCaret");

//Go back to initial position in document
$(document).scrollTop(scrollTopPosition);
});
}
})();
});

Ref

[ stackoverflow ]iOS 11 Safari bootstrap modal text area outside of cursor
How to fix the iOS 11 input element in fixed modals bug

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×