Closed davidhendrickmb closed 5 years ago
@davidhendrickmb Here is a fix that is working for me. Let me know your results.
(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('show.bs.modal', function (e) {
if ($(e.target).hasClass('inputModal')) {
// Get scroll position before moving top
scrollTopPosition = $(document).scrollTop();
// Add CSS to body "position: fixed"
$("body").addClass("iosBugFixCaret");
}
});
$(document.body).on('hide.bs.modal', function (e) {
if ($(e.target).hasClass('inputModal')) {
// Remove CSS to body "position: fixed"
$("body").removeClass("iosBugFixCaret");
//Go back to initial position in document
$(document).scrollTop(scrollTopPosition);
}
});
}
})();
Hi @girellini, Unfortunately that didn't work for me. You can see it here: https://beta-meetingsbooker.azurewebsites.net/ If you click the login link and click the username, you'll see what I mean. Do I need some CSS to go along with this for "iosBugFixCaret"?
Thanks, David
@girellini Sorry to use this issue thread, but just wanted to let you know the demo pages are reporting errors and the maps aren't loading as you now have to use an API key to use Google Maps https://demos.creative-tim.com/material-kit-pro/examples/contact-us.html
@davidhendrickmb
Ah yes, so sorry. Add this into your CSS.
body.iosBugFixCaret.modal-open {
position: fixed;
}
@davidhendrickmb
Waiting for some good news, lol.
The method behind it sets the body to fixed when the modal shows. That gets rid of the floating cursor on iOS. When the modal hides it removes the extra body class.
@girellini I had to change it to the below to bind my modal, but it works now!
if($(e.target).hasClass('inputModal') || $(e.target).hasClass('modal'))
Cheers!
Awesome!
Will this be included in a future release?
On an input on a modal, the cursor sits below the input when it is interacted with, which looks pretty bad. You can see in the below the First Name is the one where text is being entered, but the cursor is on password.