Unwanted Auto-Scrolling to Top on Input Focus, with Safari

iOS Safari/Chrome - Unwanted scrolling when focusing on input fields

iOS will zoom into a input if the font-size is less than 16px.

You have a couple of options to prevent this:

Increase font size

Set font-size to at least 16px for your inputs in your CSS.

Add maximum-scale=1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Note that this option can disable the pinch-to-zoom functionality on Android devices, although not on iOS.

iOS Safari/Chrome - Unwanted scrolling when focusing an input inside the modal

Just adding an answer here in case people stumble upon this question (rather than your other question, which has a great demo to illustrate this issue)

We are facing a similar issue at work. As you mentioned, the offset is always ~50% of the height of the page, which happens regardless of where your initial offset is.

In the past, when I observed a similar "jumping" with earlier iOS versions (albeit, much less dramatic jumping), I have usually worked around this by applying position: fixed (or relative) to the body (which allows overflow: hidden to properly work).

However, this has the unintended consequence of jumping the user back to the top of the page, if they've scrolled down.

So, if you're open to addressing this issue with some JavaScript, here's a fix/hack I've thrown together:

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

And what the CSS looks like:

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

Here's a fork of your demo page (from your other question), to illustrate: https://jpattishall.github.io/sweetalert2/ios-bug.html

And for those who are looking for a more general fix, you could do something like the following when opening/closing a modal:

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

Edit: To avoid the "shifting/unshifting" on desktops, I would suggest feature detection/ua sniffing to apply this to only mobile safari.

iOS Chrome/Safari - Unwanted scrolling when focusing an input inside the modal

We are facing a similar issue at work, and I stumbled upon this question with your (excellent) demo page.

As you mentioned, the offset is always ~50% of the height of the page, which happens regardless of where your initial offset is.

In the past, when I observed a similar "jumping" with earlier iOS versions (albeit, much less dramatic jumping), I have usually worked around this by applying position: fixed (or relative) to the body (this allows overflow: hidden to properly work).

However, this has the unattended consequence of jumping the user back to the top of the page, if they've scrolled down.

So, if you're open to addressing this issue with some JavaScript, here's a fix/hack I've thrown together:

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

And what the CSS looks like:

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

Here's a fork of your demo page, to illustrate: https://jpattishall.github.io/sweetalert2/ios-bug.html

And for those who are looking for a more general fix, you could do something like the following when opening/closing a modal:

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

Edit: One thing to note is that we didn't apply the fix to all devices/platforms blindly, just iOS Safari. I noticed in your other question that you weren't a fan of overflow: hidden due to the shifting of the page when the scrollbar appears/disappears (which I totally agree with). I would suggest just applying the JS to iOS devices only.

Unwanted Scrolling to Top for Ios Devices CSS Grid

.back .description ul {
  position: absolute;
}

.back .description ul .draw-border {
  width: calc(100% - 5px);
}

IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled

Just went through tedious searching and seems that's an issue with iPhone as you have pointed in following article : https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d

So there is no way you can do it with css for sure.

But that doesn't stops you from using JQuery and Javascript >:)

Here is an untidy work around for your scenario. Have tested with multiple text boxes too on iPhone only:

document.getElementById("app").innerHTML = `

<div class="page-content">

<input type="text" 

onfocus="disableScrolling(this)" 

onfocusout="enableScrolling(this)">

  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>

  <input type="text" 

  id="text2"

onfocus="disableScrolling(this)" 

onfocusout="enableScrolling(this)">

  <p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>

</div>`;

var currentElem; 

function stopScroll() 

{

    if(currentElem)

    {

        var top = $("input:focus").offset().top;

        $('html, body').stop().animate({

            scrollTop: top

        }, 500, function(){});

    }

}

function disableScrolling(elem) 

{

    currentElem = elem;

    document.addEventListener("touchend", stopScroll);

    setTimeout(function()

    {

        stopScroll();

    },10);

}

function enableScrolling() 

{

    currentElem = undefined;

    document.removeEventListener("touchend", stopScroll);

}

html {

  height: 100%;

  scroll-behavior: smooth;

}

body.disable-scroll {

  position: fixed;

  height: 100%;

  overflow: hidden;

}

.page-content {

  background: #ccc;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="disable-scroll">

  <div id="app"></div>

  <div>End of body</div>

</body>

Safari in ios8 is scrolling screen when fixed elements get focus

This is now fixed in iOS 10.3!

Hacks should no longer be needed.

---

Related Topics