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.
How to stop mobile safari from setting fixed positions to absolute on input focus?
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
IOS8: whole page scrolls down when input in fixed footer gets focus
Make body element fill 100% of width and height with hidden overflow. Then add additional div-container to the body and put all body's former content inside this div. Make the div scrollable. Now it's safe to put the fixed footer inside the body. It won't scroll.
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.
Related Topics
How to Get Color Value from Gradient by Percentage with JavaScript
Extract the Current Dom and Print It as a String, with Styles Intact
Using JavaScript to Mark a Link as Visited
Mutationobserver: New Value in the Format of 'Oldvalue'
Angularjs:Difference Between the $Observe and $Watch Methods
Does Every JavaScript Function Have to Return a Value
JavaScript Efficiency: 'For' VS 'Foreach'
How to Find If an Array Contains a Specific String in JavaScript/Jquery
JavaScript Variable Definition: Commas VS. Semicolons
How to Play a Notification Sound on Websites
Convert JavaScript-Generated Svg to a File
Safari in iOS8 Is Scrolling Screen When Fixed Elements Get Focus
How to Read the Applied CSS-Counter Value
Arrange Multiple Divs in CSS/Js
How to Check for Null Values in JavaScript
When a 'Blur' Event Occurs, How to Find Out Which Element Focus Went *To*