I am having issues with vertical scrolling in in-app browsers.
This is how I see my site when I try to open it from Instagram
And this is how I see my site in Safari
I use an iPhone SE.
This how I tried to fix it. But all I could do was raise the button from under the toolbar, but I did not solve the problem with the scrolling.
function setHeight() {
// Get window height without browser toolbar
var windowsHeight = window.innerHeight;
// I tried fix the problem by this way, but I think it's not smart
var forinsta = windowsHeight - 70;
// Determine where the user gets to the site
var ua = navigator.userAgent || navigator.vendor || window.opera;
var isInstagram = (ua.indexOf('Instagram') > -1) ? true : false;
if (isInstagram) {
// If user gets to the site from Instagram, I set innerHeight -70px
document.getElementById('wrapper').style.height = forinsta + 'px';
document.body.style.height = forinsta + 'px';
} else {
// Else just set innerHeight
document.getElementById('wrapper').style.height = windowsHeight + 'px';
document.body.style.height = windowsHeight + 'px';
}
}
setHeight();
window.onresize = function (event) {
setHeight();
};html{
position: relative;
overflow: hidden;
height: 100%;
}
body {
font: 16px Arial, Helvetica, sans-serif;
line-height: 1.4;
overflow: hidden;
position: relative;
height: 100%;
}
#wrapper{
position: relative;
overflow: hidden;
height: 100%;
}
//Swiper
.swiper-container {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}<div id="wrapper">
<div class="swiper-container">
<!-- I use swiper.js -->
Slider Content
</div>
</div>