Develop Reference

Disable body scrolling when IOS keyboard shows

I have looked around for a solution to this problem and although I have come across other people asking the same question , it seems answers for this issue are limited.
The Problem
The issue is that I have a overlay (slide-out from the side) menu which has a search box on it. I need to disable all body scroll so that the user can easily scroll around on the overlay without the body moving all over the place.
Solutions I have tried
The solution I have tried is from the link below
How to disable body scrolling when modal is open IOS only
This solution works great , when the sidebar shows up body scroll stops and when the sidebar disappears body scroll works again.
Whats wrong with the solution I have already found
Well , on Ipad when you click on a search box and the keyboard shows up for some reason body scrolling issue once again appears. If I get rid of the keyboard the problem is once again sorted.
Why is there no code on this page
I work with confidential data and the code is company property therefore this is not something I can post on here. Now I can mock up an example code which shows the issue however it would literally be a side bar with a search box and I dont think that would be useful however I may be wrong in which case I'm sure I can mock something up.
Apologies if the lack of code on this page offends anyone.

HTML scrolling issue in dialogs on iOS

I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?

I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.

Android keyboard hide text inputs

I have an application using jQuery Mobile.
When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.
When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.
I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.
Do you already seen this kind of error ?
Thanks by advance

I created a demo for you, as an alternative
I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.
Demo
https://jsfiddle.net/fyom081o/
Code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});

Please see the answer from when I raised this same question...
Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
It requires a lot of userAgent sniffing to make it work properly
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue

Scrolling to the top of a new opened page inside an iframe

I have a facebook app run inside an iframe. The problem is that if I have a smaller browser window, I scroll to the bottom to the app's page list and select a new page, it will open in the iframe also in the bottom.
I tried to add a #top to the links, linking to a name="#top" element inside the new page, but this doesn't work on Firefox (verified) and supposedly IE(not verified yet).
For Firefox, I understood it's a known issue and there are some workarounds to make a "scroll to top" link work, BUT I haven't found any solutions on how to open a new link inside the iframe and make it scroll.
I added a onload="location.href='#'" to the body element of the iframe and still no success.
Whatever I try, it seems to be ignored by Firefox.
Did any of you encountered this problem before? If so, can you spare some advices, please?
Thanks

You could try a "ugly" workaround using http://api.jquery.com/scrollTop/
As a Facebook-developers, I am curious. How do you resize the app-iFrame during runtime? I have a few ajax-based apps, and after every ajax-call I resize the window, eliminating this problem.
Might worth taking a look into.

Feels weird to answer my own question, but hopefully this will help others.
In the end, what did the trick for me was Facebook's scrollTo function: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I still don't know if it works on IE, since I haven't tested it yet, but on Firefox everything is ok now

Lightbox close link doesn't work in IE7

While the lightbox example page works fine for me in IE7, I seem to have broken it in my implementation.
I've written a Lightbox plugin for Mango Blog and everything works fine in Firefox. However, in IE7 the "close" button doesn't work. If I'm fast enough to get my cursor into the position that the close button will be placed before it slides into place, the IE status bar shows the "#" link, but clicking or moving the cursor makes the status bar go blank -- and of course nothing happens.
Not that it was that necessary, but I made a quick screencast of the behavior in IE7. Note the cursor not switching to a hand on the close button.
Any ideas how to fix this?

Perhaps you should try to use the actual 2.0.4 version of Lightbox as a base, there seem to be several changes in the DOM code, although nothing like the bug you described is mentioned in the changelog.