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"); } });
$(document).ready(function() { // Detect ios 11_x_x affected // NEED TO BE UPDATED if new versions are affected (functioniOS_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); }); } })(); });